No 'Access-Control-Allow-Origin' header -

Question

XMLHttpRequest cannot load http://myapi/api/rating. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8104' is therefore not allowed access. The response had HTTP status code 403.

I can't figure out why I can't make CORS requests. I've install the middleware here, added it to the global http kernel, but it still doesn't work. Tried to create a custom middleware given stackoverflow suggestions but that also did not work. Also tried adding a Route group. Lastly, I tried setting the response headers manually in the request action. I'm really stuck - help is appreciated!

See for code: https://gist.github.com/KerryRitter/0d7ababb7b9eb8d54f0ae55add9704a1

Answer 1

https://github.com/barryvdh/laravel-cors

The laravel-cors package allows you to send Cross-Origin Resource Sharing headers with Laravel middleware configuration.

Features

Handles CORS pre-flight OPTIONS requests Adds CORS headers to your responses

Answer 2

I faced this error in laravel 5.4 recently, i was sending ajax post request to my own website, and was still getting this same error, i faced this error due to two reasons to be precise,

error: XMLHttpRequest cannot load https://[mydomain].com/quote/short. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://[mydomain].com' is therefore not allowed access.

The reason for above error was that, i was posting request to http domain from https domain, so when i changed it to https, the error was resolved, then again i got the same error due to similar reason, which was the reason, this time, the domain had www. and the requested one did not, after i added www. to both, it worked like a charm.

And for cross origin requests, i used to following solution:

1. Create a middleware (cors in my case) having code below

   return $next($request)
       ->header('Access-Control-Allow-Origin', '*')
       ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
   

2. Insert middle-ware into routeMiddleware array in kernal.php

   'cors' => \App\Http\Middleware\Cors::class,

3. Add middleware to the respected route

   Route::get('myRoute', ['middleware' => 'cors' , 'uses'=> 'MyController@Action']

Hope this answer helps someone facing the same problem as myself.

Answer 3

If you are using Laravel 5.5 & Laravel 5.x and facing same problem like No 'Access-Control-Allow-Origin' header is present on the requested resource. Just use following package and config your system.

Step 1:

composer require barryvdh/laravel-cors

Step 2

You also need to add Cors\ServiceProvider to your config/app.php providers array:

Barryvdh\Cors\ServiceProvider::class,

To allow CORS for all your routes, add the HandleCors middleware in the $middleware property of app/Http/Kernel.php class:

For global uses:

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

For middleware uses:

protected $middlewareGroups = [
   'web' => [
       // ...
   ],

   'api' => [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ],
];

Step 3

Once your installation completed run below command to publish the vendor files.

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

Hope this answer helps someone facing the same problem as myself.

Answer 4

You can create Cors middleware class and add into the application's global HTTP middleware stack in kenel.php. Middlewares in this stack will run during every request to your application. After adding middleware into that stack you don't want to run it in api.php file. Follow this link for more information.

Answer 5

Laravel restricts the cross origin request due to security issues by default. We need to create a Cors middleware to the accept the request from different origin.

Step 1 : Create Cors middleware.

php artisan make:middleware Cors

Step 2 : Add below lines in handle function before return.

//header('Access-Control-Allow-Origin:  *');
header('Access-Control-Allow-Origin:  http://localhost:4200');
header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Authorization, Origin');
header('Access-Control-Allow-Methods:  POST, PUT');

Step 3 : Register the middileware in app/Http/Kernel.php file.

Add below line in $middleware array 

\App\Http\Middleware\Cors::class,

Step 4 : Now we have to call the middleware in app/Http/Kernel.php file

Add below line in $routeMiddleware array 

'cors' => \App\Http\Middleware\Cors::class,