Vue Laravel Axios API Issue

Question

Im using vue axios call to access Laravel API's from localhost

Scenario 1: In axios call i got error

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed

then in Laravel API i put

header("Access-Control-Allow-Origin", "*");

this error goes and that axios call works

Scenario 2: For another axios call i got error

No 'Access-Control-Allow-Origin' header is present on the requested resource

then in Laravel API i put

header('Access-Control-Allow-Origin: *');

this error goes and that axios call works

In Laravel Kernel.php i have

protected $middleware = [
       \Fruitcake\Cors\HandleCors::class,
    ];

Please check header slight differnces... why i need different header's for different calls? How can i resolve this?

Sounds like your CORS configuration is messed up. I recommend using the built-in middleware ~ `\Illuminate\Http\Middleware\HandleCors::class`. There's no need to ever call `header()` with any `Access-Control-Allow-*` headers — Phil, Feb 06 '23 at 04:27
in laravel kernel.php i laready have \Fruitcake\Cors\HandleCors::class — ayyanar pms, Feb 06 '23 at 05:35
And what about your [configuration](https://github.com/fruitcake/laravel-cors#configuration)? — Phil, Feb 06 '23 at 05:38

score -1 · Answer 1 · answered Feb 06 '23 at 05:55

You can do this by following this solution: No 'Access-Control-Allow-Origin' header - Laravel

OR

Allow CORS through your .htaccess by adding the mentioned code

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "*"
    Header set Access-Control-Allow-Methods "*"
</IfModule>

Note: This allow CORS from all hosts so better to allow trusted domain.

Vue Laravel Axios API Issue

1 Answers1