Angular - > Web Api 2：“没有'Access-Control-Allow-Origin'标题”

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.

Answer 2

For .NET server can configure this in web.config as shown below

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="your_clientWebUrl" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

Answer 3

I also work with webapi2 and AngluarJS client (different server) in Azure WebSites.

please check my answer: https://stackoverflow.com/a/25758949/361100

If you cannot solve the problem, check other answers of the above link.