AngularJS preflight OPTIONS request not working with Chrome?

Question

I developed a simple application using AngularJS here . I am using the API that I developed in Laravel located here . When I try to enter the application using Firefox, it works fine. My API accepts the request before the OPTIONS flight and responds with 200 OK. Finally, the POST request generates a token, and the user is logged in.

On the other hand, when Chrome sends a request before an OPTIONS flight, it gets 403 back, and it gives me this error in the console:

XMLHttpRequest cannot load http://angulairapi.rohanchhabra.in/auth. Invalid HTTP status code 403 

I also tried sending the OPTIONS request to / auth via the Postman REST client, and it returns 200 OK as expected. Why is Chrome behaving like this? What am I missing?

Answer 1

Access control is the responsibility of the server, you need to configure this in Laravel.

Use this package: Laravel Cors , it helps a lot.

Answer 2

First you should send those headers (for example, wildcard files are incorrect):

 Access-Control-Allow-Headers: X-Requested-With, content-type Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS 

In the second (and important) removal of the header from the AngularJs $ httpProvider service in config:

 myApp.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; } ]); 

Answer 3

in filters.php (Laravel 4.2)

add below

 App::before(function($request) { // Enable CORS // In production, replace * with http://yourdomain.com header("Access-Control-Allow-Origin: *"); //header('Access-Control-Allow-Credentials: true'); optional if (Request::getMethod() == "OPTIONS") { // The client-side application can set only headers allowed in Access-Control-Allow-Headers $headers = [ 'Access-Control-Allow-Methods'=> '*', 'Access-Control-Allow-Headers'=> '*' ]; return Response::make('You are connected to the API', 200, $headers); } }); 

you can change Access-Control-* values ​​to suit your needs

Answer 4

The problem is in the "Access-Control-Request-Headers: accept" section. You need to add "accept" to "Access-Control-Allow-Headers".

Compare this two queries:

• Chrome: 403 Forbidden curl ' http://angulairapi.rohanchhabra.in/auth ' -X OPTIONS -H 'Access-Control-Request-Method: POST' / angulair.rohanchhabra.in '-H' Accept-Encoding: gzip, deflate, sdch '-H' Accept-Language: ru-RU, ru; q = 0.8, en-US; q = 0.6, en; q = 0.4 '-H' User-Agent: Mozilla / 5.0 (Macintosh, Intel Mac OS X 10_10_1) AppleWebKit / 537.36 (KHTML, e.g. Gecko) Chrome / 39.0.2171.95 Safari / 537.36 '-H' Accept: / '- H 'Referer: http://angulair.rohanchhabra.in/ ' -H 'Connection: keep-alive' -H 'Access-Control-Request-Headers: accept, content-type' -v

• Firefox: 200 OK curl ' http://angulairapi.rohanchhabra.in/auth ' -X OPTIONS -H 'Access-Control-Request-Method: POST' -H 'Origin: http://angulair.rohanchhabra.in ' - H 'Accept-Encoding: gzip, deflate, sdch' -H 'Accept-Language: ru-RU, ru; q = 0.8, en -US; q = 0.6, en; q = 0.4 '-H' User-Agent: Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit / 537.36 (KHTML, e.g. Gecko) Chrome / 39.0.2171.95 Safari / 537.36 '-H' Accept: / '-H' Referer: http://angulair.rohanchhabra.in/ '-H' Connection: keep-alive '-H' Access-Control -Request-Headers: content-type -v

Answer 5

In Laravel, try setting: 'Access-Control-Allow-Methods' and 'Access-Control-Allow-Headers' to '*'

 public function handle($request, Closure $next) { header("Access-Control-Allow-Origin: *"); // ALLOW OPTIONS METHOD $headers = [ 'Access-Control-Allow-Methods'=> '*', 'Access-Control-Allow-Headers'=> '*' ]; if($request->getMethod() == "OPTIONS") { // The client-side application can set only headers allowed in Access-Control-Allow-Headers return Response::make('OK', 200, $headers); } $response = $next($request); foreach($headers as $key => $value) $response->header($key, $value); return $response; }