意外访问Access-Control-Allow-Origin标头错误

Question

I have been trying to understand this for a while and just can't get it!

I followed a tutorial ( https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps ) but instead of putting Angular inside the /public folder, I created an external client.

Using MAMP PRO, I put the API is at http://www.jotbot.local and the client is at http://www.jotclient.local . When I try to login, it get this error:

XMLHttpRequest cannot load http://www.jotbot.local/api/authenticate. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.jotclient.local' is therefore not allowed access.

In the CORS config in Laravel I have:

return [ 
    'supportsCredentials' => false, 
    'allowedOrigins' => ['*'], 
    'allowedHeaders' => ['*'], 
    'allowedMethods' => ['GET', 'POST', 'PUT', 'DELETE'], 
    'exposedHeaders' => ['*'], 
    'maxAge' => 0, 
    'hosts' => [], 
];

I am not sure WHAT to change. Is the 'allowedOrigins' => ['*'] line or the 'hosts' => [] line what needs to be changed?

Also, the client (in my real app) will be publicly accessed and will be given to a client whenever he is processed meaning I won't know the domains I need to allow so I need SOME KIND of wildcard, so I am really confused and documentation on the CORS package is hard to find (or I don't know what I am looking for ... LOL)

Thanks for any help you can provide.

Answer 1

I followed that same tutorial and faced the same problem.

You have to add the CORS for Laravel 5.1.

Follow the steps on installation and it will work fine.

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

Require the barryvdh/laravel-cors package in your composer.json and update your dependencies.

$ composer require barryvdh/laravel-cors 0.7.x

Add the Cors\\ServiceProvider to your config/app.php providers array:

 Barryvdh\Cors\ServiceProvider::class,

On your routes.php file add the middleware

Route::group(['prefix' => 'api','middleware' => 'cors'], function()

Or

 Route::group(['middleware' => 'cors'], function()