(Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’)

Question

I am totally new to AngularJS and token based authentication. Actually I would like to use AngularJS framework as my front-end while API as back-end. Thus, I have followed some tutorial from internet and I have attached my code in https://github.com/mmSebastian/angularjsWebAPI .

When I try to login my web app, I face below error in my browsers:

Firefox

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http: //localhost:50987/token. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’).

Chrome

Failed to load http: //localhost:50987/token: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin "http: //localhost:52386" is therefore not allowed access.

Edge

SEC7128: Multiple Access-Control-Allow-Origin headers are not allowed for CORS response.

However, it works fine when I run http: //localhost:50987/token through Postman.

I have tried below links but still couldn't solve it. Kindly help on this.

Welcome to StackOverflow, I would highly suggest you go through [this](https://stackoverflow.com/help/mcve) to improve your question which in turn will increase the chances of getting a proper answer. — McMutton, Oct 19 '17 at 15:19
Can you please tell us what is the value of the Origin header your client sends to the server? — McMutton, Oct 19 '17 at 15:20
@McMutton i m sorry for my language. Client would be http://localhost:52386 while server would be http://localhost:50987. May be I couldn't express well, thus i have attached the code. — mmSebastian, Oct 20 '17 at 01:56
you have other headers being added around this line in your Global.asax.cs: https://github.com/mmSebastian/angularjsWebAPI/blob/master/FiiiEx/Global.asax.cs#L28, but you don't have anything defined for `Access-Control-Allow-Origin`. — Claies, Nov 02 '17 at 20:33

score 0 · Answer 1 · edited Nov 02 '17 at 20:26

CORS (cross origin) requires an HTTP request made from the browser to have exactly the same domain as the server.

e.g. a request from localhost:8080 to localhost:8080 will work

e.g. a request from localhost:8080 to localhost:8081 will NOT work

And you will get a CORS error. This is only enforced by the browser and thus POSTMAN will work fine.

To fix the issue, add the relevant CORS headers on your server e.g.:

Access-Control-Allow-Origin: *

You may have to add other Access-Control- headers on your server.

Alternatively, you can get your webserver to proxy certain requests directly to your backend thereby bypassing CORS enforcement in the browser.

thanks for your information. I have add the relevant CORS headers but seem not working. I have attached my code at https://github.com/mmSebastian/angularjsWebAPI. Would you mind to correct me where have i done wrong? — mmSebastian, Oct 20 '17 at 02:01

(Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’)

1 Answers1