Laravel Cors Setup

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.

Tagged in : Tagged in : ,
Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.