No 'Access-Control-Allow-Origin' header - Laravel
Solution 1
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:
FruitCake\Cors\CorsServiceProvider::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 = [
// ...
\Fruitcake\Cors\HandleCors::class,
];
For middleware uses:
protected $middlewareGroups = [
'web' => [
// ...
],
'api' => [
// ...
\Fruitcake\Cors\HandleCors::class,
],
];
Step 3
Once your installation completed run below command to publish the vendor files.
php artisan vendor:publish --provider="Fruitcake\Cors\ServiceProvider"
Hope this answer helps someone facing the same problem as myself.
Solution 2
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,
Solution 3
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
Solution 4
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:
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');
Insert middle-ware into routeMiddleware array in kernal.php
'cors' => \App\Http\Middleware\Cors::class,
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.
Solution 5
ok, here is my try. if i'm post to protected api using wrong token, passport return 401 with {"message":"Unauthenticated."}
but because there is no cors header exist on response, my vue app get CORS error and cannot handle the response code.
so at laravel 5.8 on http/kernel.php $middlewarePriority add \Barryvdh\Cors\HandleCors::class before \App\Http\Middleware\Authenticate::class
here is my code:
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
// \Illuminate\Session\Middleware\AuthenticateSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
'api' => [
'throttle:300,1',
'Localization',
'bindings',
'cors'
],
];
protected $routeMiddleware = [
'auth' => \App\Http\Middleware\Authenticate::class,
'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
'can' => \Illuminate\Auth\Middleware\Authorize::class,
'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
// Add Localization MiddleWare
'Localization' => \App\Http\Middleware\localization::class,
'cors' => \Barryvdh\Cors\HandleCors::class,
];
protected $middlewarePriority = [
\Illuminate\Session\Middleware\StartSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
//add to handle cors before authenticate
\Barryvdh\Cors\HandleCors::class,
\App\Http\Middleware\Authenticate::class,
\Illuminate\Session\Middleware\AuthenticateSession::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\Illuminate\Auth\Middleware\Authorize::class,
];
hope this help someone else
Related videos on Youtube
Kerry Ritter
Updated on January 22, 2022Comments
-
Kerry Ritter over 2 years
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
-
num8er about 7 yearsbe simple, use this plugin: github.com/barryvdh/laravel-cors
-
Kerry Ritter about 7 yearsI did, that is the middleware I mentioned (forgot to say). I added to the kernel as seen in my gist
-
num8er about 7 yearshow about to keep it like:
'middleware' => [\Barryvdh\Cors\HandleCors::class]
-
Kerry Ritter about 7 yearsAlright, I removed the 'cors' registration and Cors class. removed the Route group. removed the request action headers. All i have is this for the Kernel protected $middleware = [ ... \Barryvdh\Cors\HandleCors::class ]; Still no luck :(
-
Kerry Ritter over 6 yearsSolved my problem on this: I didn't add "Barryvdh\Cors\ServiceProvider::class" to the config/app.php providers array.
-
-
Kerry Ritter over 6 yearsSolved my problem on this: I didn't add "Barryvdh\Cors\ServiceProvider::class" to the config/app.php providers array.
-
MrCujo over 4 yearsThanks, this was the only thing that worked for me. I believe the other answers (or stuff I've seen online) don't mention the fact that we need to add the middleware to the
$middleware
array. -
Varun Pradhan over 4 yearsThank You So Much Without using any package it did the work..
-
Elby over 4 yearsin config/app.php we have to add this Fruitcake\Cors\CorsServiceProvider::class,
-
Jose Mhlanga almost 4 yearsUsing the
*
works rather than the host origin. Was missing theCors.php
middleware in the array as well
Thank you -
ldmuniz over 3 yearsIt the ONLY working method. A lot of wrong resources on web.
-
Quentin over 2 yearsYou can't have multiple
Access-Control-Allow-Origin
headers. -
Quentin over 2 yearsYour choice of Headers and Methods to allow seems arbitrary and unrelated to the question.
-
arman amirkamali over 2 yearsbut thats worked for me