Error “Access-Control-Allow-Origin” header in asp.net

Question

I have 2 project are running parallel. http://localhost:497 and http://localhost:580

On http://localhost:580 I want to get file html form folder PDF in http://localhost:497 into iframe

<iframe src="http://localhost:497/PDF/test.html"></iframe>

After that, i was received an error:

XMLHttpRequest cannot load http://localhost:497/PDF/test.html . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:580 ' is therefore not allowed access.

and I can't use jquery for get effect to content in iframe .

I don't know how to fix that error, please help me. Thanks All.

Answer 1

All modern browsers disallow cross domain requests for security purposes. When an XMLHttpRequest is made from one domain to another (localhost:580 to localhost:497 in this case), it will send what is known as a pre-flight request to the server to see if the requesting server has access. The appropriate headers must be present in order for the request to be accepted, which happens on a second trip once the initial preflight handshake is verified. Here is a link to CORS documentation from Mozilla:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Answer 2

If you enhance your web.config file in visual Studio, it should works. As far as I know, preflight generates automatically a OPTIONS request, so you also need to allow OPTIONS requests.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://localhost:580" />
       <add name="Access-Control-Allow-Methods" value="GET,OPTIONS" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>