Preflight OPTIONS request by AngularJS not working with Chrome?

Question

I have developed a simple application using AngularJS hosted here. I am consuming an API I developed myself in Laravel hosted here. When I try to log into the application using Firefox, it works fine. My API accepts the pre-flight OPTIONS request and responds with a 200 OK. Finally the POST request generates a token and the user is logged in.

On the other hand, when Chrome sends the pre-flight OPTIONS request, it receives an 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 have tried sending the OPTIONS request on /auth via Postman REST client also, and it gives back a 200 OK as expected. Why is Chrome behaving like this? What am I missing?

Answer 1

In first you have to send those Headers (wildcard works incorrect sometimes):

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

In second (and important) remove header from AngularJs service $httpProvider in config:

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

Answer 2

The Access Control is a server responsibility, you need config this in Laravel.

Use this package: Laravel Cors this helps very much.