Angularjs application fail POST method to cross domain

Question

I am trying to call post method of ASP.Net web api which has enabled accessing cross domain as follows in web config.

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customHeaders>
</httpProtocol>

My angular app is a express app. It call the post method as follows.

method: "POST",
  data: data,
  url: "http://api.justbooksaloon.com/api/Customer/Login",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'POST',
    'Access-Control-Allow-Headers': 'Content-Type, Origin, X-Requested-With, Accept'

But it gives me following error.

XMLHttpRequest cannot load http://api.justbooksaloon.com/api/Customer/Login. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response. angular.js:14110 POST http://api.justbooksaloon.com/api/Customer/Login null

score 1 · Accepted Answer · answered Dec 20 '16 at 13:05

1

The Access-Control-* headers are response headers.

You are trying to set them as request headers.

Since they are not standard request headers, you trigger a preflight request asking the server if they are acceptable.

The server isn't expecting them (they are response headers and make no sense as request headers) so it says "no".

Don't try to set them in your client side JavaScript.

answered Dec 20 '16 at 13:05

Quentin

914,110
126
1,211
1,335

By removing those I got following error. 'Request header field Access-Control-Max-Age is not allowed by Access-Control-Allow-Headers in preflight response' – Janith Widarshana Dec 20 '16 at 14:16
@JanithWidarshana — That starts with `Access-Control` too. Remove it from your client side code. – Quentin Dec 20 '16 at 14:18
I'm not sending any header parameters now. But it still giving 'Request header field Access-Control-Max-Age is not allowed by Access-Control-Allow-Headers in preflight response.' error. – Janith Widarshana Dec 20 '16 at 14:25
@JanithWidarshana — You are sending them. The error message tells you that you are sending them. The code that sets them might not be in an obvious place, but it is there, somewhere. – Quentin Dec 20 '16 at 14:27
Yes, I have set up them. Thanks :) – Janith Widarshana Dec 21 '16 at 04:18

Angularjs application fail POST method to cross domain

1 Answers1