Angular POST cross origin error while POSTMAN works

Question

I try to POST from my angular login service:

$http.post('https://xyz/login',
            {
                headers: {
                    'Content-type': 'application/json',
                    'Accept': 'application/json',
                    'signature': 'asd'
                }

And I get this error:

XMLHttpRequest cannot load https://xyz/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1337' is therefore not allowed access.

I tried this headers:

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

And also these:

"Access-Control-Allow-Origin": "*";
"Access-Control-Allow-Headers": "X-Requested-With";
"Access-Control-Allow-Methods": "GET, POST", "PUT", "DELETE";

The interesting thing, is that the POSTMAN works. What shoud I have to do?

Thanks.

Answer 1

Your request includes non-simple headers Content-type and signature which must be included in the response's Access-Control-Allow-Headers header.

(Content-type is sometimes a simple header, but only for particular values. application/json is not one of those values, and it causes Content-type to become non-simple.)

Add Content-type to Access-Control-Allow-Headers in your server's preflight response.

POSTMAN is not bound by the same-origin policy, so it does not require CORS support from the server.

Answer 2

Is your browser making an OPTIONS request before POSTing? check the NET tab I've had issues before where an OPTIONS request was being made by the browser or Angular (don't know which) and the server did not have ...

"Access-Control-Allow-Methods": "GET, POST", "PUT", "DELETE", "OPTIONS";

Answer 3

Not sure if you already have the information you need. But in my local web-server - when I make an http request using postman here is what it adds to the header:

headers: { host: 'localhost', connection: 'keep-alive', pragma: 'no-cache', 'cache-control': 'no-cache', 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36', accept: '/', referer: 'http://localhost/', 'accept-encoding': 'gzip, deflate, sdch', 'accept-language': 'en-US,en;q=0.8' },

And here is what I see in the rawHeaders: [ 'Host', 'localhost', 'Connection', 'keep-alive', 'Pragma', 'no-cache', 'Cache-Control', 'no-cache', 'User-Agent', 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36', 'Accept', '/', 'Referer', 'http://localhost/', 'Accept-Encoding', 'gzip, deflate, sdch', 'Accept-Language', 'en-US,en;q=0.8' ],

So perhaps you just need to fake your client to be a recognized browser client.

Answer 4

When sending a POST request from Angular with application/json as the content type, the server might respond with an OPTIONS request due to CORS (Cross-Origin Resource Sharing) preflight checks. This is a standard security measure by browsers to check if the server allows the requested methods and headers.

If you only want to accept certain methods like GET, POST, PUT, and DELETE, and you find that using application/json triggers OPTIONS requests, you can try using application/x-www-form-urlencoded or plain text (text/plain) with the POST method. This can help avoid the OPTIONS request and directly send the POST request to the server. Additionally, ensure that the server is configured to accept the desired methods by including the appropriate CORS headers like "Access-Control-Allow-Methods".