Angular JS Cors No 'Access-Control-Allow-Origin' header is present on the requested resource Error

Question

On my C# web api I have cors enabled i.e.

[EnableCors(origins: "*", headers: "*", methods: "*")]

and then in my angular js site I am calling post API as such

authService.login = function (credentials) {
                return $http
                    .post(WEB_CONFIG.login, credentials)
                    .then(function (res) {
                        Session.create(res.data.Email, res.data.Roles,res.data.Username);
                        return res.data.user;
                    });
            };

The angular site is making the request from localhost:9000, and the API is located at localhost

getting the error

XMLHttpRequest cannot load http://localhost/mysite/api/user/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:9000' is therefore not allowed access.

Why am I getting this error with Cors enabled ?

Have you enabled cors on both post and options request on the backend? Or only on the post-request? (The mentiosn preflight request is a options-request sent before the real post-request). I see that you have methods: "*", but that wont help if it is added to a post-only resource. — Etse
Can you give an example ? right now I have config.EnableCors(); in my WebApiConfig.cs. Should it be enabled somewhere else ? — StevieB
I am not a C#-person, but this seems to be a problem that resides on the backend. For some reason cors had not been properly enabled. We would have to see more of the backend code to explain why. — Etse
Maybe the problem is in the "*" syntax. Try enabling everything explicitly. — Bata
* should be allowed. I think it's something with this preflight request I need to configure ? — StevieB

Sumit Vairagar Sumit Vairagar · Accepted Answer · 2017-07-24T18:59:06

Try this configuration.

cors:
    allowed-origins: "*"
    allowed-methods: GET, PUT, POST, DELETE, OPTIONS
    allowed-headers: "*"
    exposed-headers:
    allow-credentials: true
    max-age: 1800

Angular JS Cors No 'Access-Control-Allow-Origin' header is present on the requested resource Error

1 Answers