I'm trying to use Restangular in my AngularJS application to access a REST API and I'm facing an issue with the 'Access-Control-Allow-Origin' header. I know that this needs to be returned with the API response for security reasons and it is being returned, but for some reason XMLHttpRequest
doesn't seem to be noticing it.
The full error message is this:
XMLHttpRequest cannot load http://api.mysite.dev/users. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mysite.dev' is therefore not allowed access.
If I look at the request in the Network tab of Chrome's dev tools, I can see that the header is being set on the response:
This is the code that I'm using to serve those headers in my Laravel REST application:
Route::options('{all}', function ()
{
$response = Response::make('');
$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
$response->header('Access-Control-Allow-Headers', 'Accept, Content-Type');
return $response;
})
->where('all', '.*');
Any ideas what could be going wrong here?
Try these additional Access-Control-Allow-Headers:
$response->header('Access-Control-Allow-Headers', 'Authorization,content-type,accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since');