This post is going to be short and sweet. “Short” because Fiddler makes working around this problem so simple. And “Sweet” because I think this is really powerful and will allow you to develop applications that show why cross domain access, in some situations, should be allowed.
In my last post on Making cross domain JavaScript requests using XMLHttpRequest or XDomainRequest I demonstrated that in order to access a resource (web page/web service) the server needs to respond to your application/JavaScript HTTP requests with an HTTP header of “Access-Control-Allow-Origin”. The problem arises when you are trying to access a resource that doesn’t presently send the required HTTP header, but you really need it to (I’ve addressed a similar problem to this when developing Silverlight applications and the solution, again, was to use Fiddler to trick Silverlight into allowing a crossdomain Web Request). For development purposes you’ll need to add the required header to the server HTTP response in your development environment. This is really simple using Fiddler.
All you need to do is add a new custom rule. You can do this via the menu option: Rules -> Customize Rules…
Fiddler Customize Rules option
This will bring up a JScript.NET file (if you don’t like the thought of JScript you can just pretend it’s JavaScript) called CustomRules.js. In that file you will see a number of functions/methods that are called at certain points during an HTTP request or response. The method we are interested in is called OnBeforeResponse and what we want to do is to add the Access-Control-Allow-Origin header to trick the browser/scripting engine into thinking that the resource we are requesting allows the cross domain request.
static function OnBeforeResponse(oSession: Session){ oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");}
