Angular -> Web Api 2: "No 'Access-Control-Allow-Origin' header"

Question

Basically I'm trying to access my web api which is uploaded on Azure.

I've added my CORS attribute to my WebApiConfig class:

public static void Register(HttpConfiguration config)
{
    var cors = new EnableCorsAttribute("http://localhost:51407", "*", "*");
    config.EnableCors(cors);

However whenever I send an Ajax request (using angularJS) which rightfully contains

Origin: http://localhost:51407

I get the error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:51407' is therefore not allowed access.

What could be the issue?

Answer 1

To fix this issue, you need to configure CORS-es. First go to "Web.config", find "system.webServer" tag, inside of it add next lines:

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

That is all.