I am working on an ASP.NET MVC application which consists of a website where all the JavaScript, CSS and images are hosted and then the main web app which uses the resources hosted on this website.
Lets say that the resource url is resources.example.com and the web app url is webapp.example.com
One of the JavaScript files IE9.js (http://code.google.com/p/ie7-js/) in order to work makes a request to the CSS file (resources.example.com/styles.css), this however gets blocked as the request is to another domain this is because of the same origin policy (http://en.wikipedia.org/wiki/Same_origin_policy).
I thought I had found a way around this using the Access-Control-Allow-Origin header to the resources.example.com site. My understanding of this was that this would then allow any requests made to the resources.example.com website would be permitted provided they were in that header.
To try this out I added the header to the web.config of the website as follows:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*"/>
</customHeaders>
</httpProtocol>
Which I thought would allow any request the permission to run, but when I step through IE9.js to the point where the request is made it still catches a PermissionDenied error when requesting the CSS file resources.example.com/styles.css.
The CSS has to be hosted on the other domain and IE9.js needs to be able to request it. I believe that the answer is to do with these HTTP headers but that I might have misunderstood how to use them.
Any insight on this issue would be appreciated. As an aside I should add that the javascript file is linked to from the google code website:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
in a conditional comment and this is only an issue in IE. Any solution has to work in IE7+.
Update:
I have successfully made a request to the CSS using XDomainRequest object for IE. The content I am now getting back is gzipped so I just need to decode it and I should be away. I will post a full update and answer when I have it working.
Update:
Further to the last, the XDomainRequest object doesn’t seem to support being able to modify the Accept-Encoding header which means that the response seems to always be returned encoded and decoding this will slow down the page load and doesn’t feel right. Furthermore it appears that the XDomainRequest object is not supported in IE7 which is a required supported browser.
The only other thing I can think of is to set up a handler which IE9.js can call instead which will be on the same domain and load the contents of the required file. This also does not feel great but is the only other solution I can currently think of. Any other suggestions are welcome.
In order to get around this issue I modified IE9.js file that was making the request to call a handler in the main MVC web app. This handler could then make the requests to the resources that IE9.js needed and thus it didn’t need to make the request to the resources site directly itself.
In the scenario outlined in the question I was unable to find another solution to the problem.