Laravel Cors setup is quite easy with the awesome package by Barry. There a few basic steps to take and you can deal with Cross Origin Resource Sharing (Not to be confused with CSRF). There are a few things you could bump into though. Here the setup once again and issues you could bump into.
CORS
To quote MDN: Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use.
Normally CORS is blocked by browsers over security concerns. So to allow CORS to take place this has to be explicitely allowed in your file headers.
Setup
Setup that follows now is the same as in the README made by Barry. Require the barryvdh/laravel-cors
package in your composer.json
and update your dependencies:
$ composer require barryvdh/laravel-cors
For laravel >=5.5 that’s all. This package supports Laravel new Package Discovery.
If you are using Laravel < 5.5, you also need to add Cors\ServiceProvider to your config/app.php
providers array:
Barryvdh\Cors\ServiceProvider::class,
Now you will have CORS in all you headers.
Additional Configuration
If you want more fine grained configuration option that can be done with package like most packages. Just run
php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
and go to config/cors for more options:
'supportsCredentials' => false, 'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'], 'exposedHeaders' => [], 'maxAge' => 0,
Version < 5.5
We were running Laravel 5.4.* so we also needed to added the Cors ServiceProvider to config/app. Something changed afterwards. Now packages can be loaded via the composer.json file and this can be built into a package. See Laracasts Laravel 5.5 Episode 5.
Caveats
When you sometimes bump into errors due to issues in your Laravel, Axios or Vue setup the middleware Barryvdh\Cors\ may not work properly. We had a 404 error due to a bug loading a menu module from our API. This 404:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' https://sub.domain.com' is therefore not allowed access. The response had HTTP status code 404.
did not load the CORS header allowing for loading of the data. So I started digging in our recently migrated code for CORS issues. What I should have paid attention to is that this error was preceded by a 404 error.
Now the latter is a bug, but not related to issues with the CORS package or our DNS/API setup. The 404 that was spit out just did not get the CORS Header added and that is how the code was not loaded on the page. So if you do have a CORS issue, but another error before that. See that you fix that one before you start worrying about this package not working.
Try to change the supportsCredentials to true and give 777 permission to the keys files in storage. This works for us.