Web API CORS 관련 문제 해결(개발 시)

Angular에서 localhost Web API를 호출할 때 아래와 같은 오류가 발생할 경우

http failure response for (unknown url) 0 unknown error

You’ve run afoul of the Same Origin Policy – it says that every AJAX request must match the exact host, protocol, and port of your site. Things that might cause this:

• Hitting a server from a locally-served file (a request from file:///YourApp/index.html to http://api.awesome.com)
• Hitting an external API (a request from http://yourapp.com to http://api.awesome.com).
• Hitting an internal API (a request from http://yourapp.com to http://api.yourapp.com).
• Hitting a different port on the same host (webapp is on http://localhost:3000, API is http://localhost:4000)
• Requesting over http from https or vice-versa (requesting https://yourapp.com from http://yourapp.com)

서버측에 CORS(Cross-Orgion Resource Sharing) Header를 추가해준다.

그 외 방법은 아래 링크를 참조한다.

https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

https://stackoverflow.com/questions/29024313/asp-net-webapi2-enable-cors-not-working-with-aspnet-webapi-cors-5-2-3

I just added custom headers to the Web.config and it worked like a charm.

On configuration - system.webServer:

<httpProtocol>   <customHeaders>     <add name="Access-Control-Allow-Origin" value="*" />     <add name="Access-Control-Allow-Headers" value="Content-Type" />   </customHeaders> </httpProtocol>