CODEWITHSUNDEEP
javascriptangularjsnode.jsrestasp.net-web-api
Janith Widarshana
Janith Widarshana

Reputation: 3483

Angularjs application fail POST method to cross domain

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

enter image description here

Upvotes: 0

Views: 142

Answers (1)

Quentin
Quentin

Reputation: 943579

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.

Upvotes: 1

Related Questions