Accessing web Service from jQuery - cross domain

Question

I am trying to acess a wcf service from a jQuery client

Specifically this example http://www.codeproject.com/KB/aspnet/WCF_JQUERY_ASMX.aspx#4

All works well when the client webpage is on the same domain as the service

As soon as I move the client webpage to another domain it breaks. It cant reach the service and the request fails

This happens for all the examples, ASMX, REST and WCF

any ideas how to get this working cross daomain?

Solution 1

You are running up against the Same-Origin Policy. The web service that you are accessing must reside on the same domain as the jQuery script that is making the request. This policy is enforced by all browsers to prevent - for example - cross-site scripting and code injection attacks on web applications.

There are various ways around it, including JSONP, Proxies or Flash.

We'll need a little more information before we can suggest which technique you should use. I tend to favor JSONP. But in the meantime, here's some light reading:

http://taossa.com/index.php/2007/02/08/same-origin-policy/

https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

Here's an example use of JSONP:

url = "http://www.test.com/getData.php?callback=parseResults";

document.body.appendChild((function() {
    var newScript = document.createElement("script");
    newScript.type = "text/javascript";
    newScript.src = url;
    return newScript;
})());

function parseResults(data) {
    alert(data);
}

Solution 2

You might want to check out JSONP (JSON with Padding). In short, it involves adding a script element to the page with the web service url as the src. The web service then wraps the JSON as the first argument in a callback function, which is executed when the script is parsed.

Script elements are exempt from the Same Origin Policy, which is how they are able to get around this issue..

Comments

[ChrisCa]

would adding a CrossDomain.XML be of any use? Or is it not that simple?

[GlenCrawford]

@Christo Fur: adding a crossdomain.xml file to the domain that the web service resides on will enable Flash applications to make cross-site requests to the API, if the XML file allows the domain that the Flash application resides on (more info: jimbojw.com/wiki/index.php?title=Cross-domain_Ajax_via_Flash‌​)

[ChrisCa]

So is the idea that you make ajax calls to a service on the same domain and that forwards requests to the intended service? But does so from server side code which does not have the sort of restrictions imposed by a browser?

[Andy E]

@Christo Fur: +What RoseOfJericho said. You could look into the Access-Control headers, but they're not widely supported by browsers (might only be Fx) and IE8 requires you to use XDomainRequest() instead of XMLHttpRequest(). JSONP is really your best option for x-browser compatibility.

[GlenCrawford]

If you're talking about using a Proxy, then yes, that's exactly right. The SOP is enforced by the browser, therefore PHP, ASP, ColdFusion and so on are not bound by it. Your JS makes the request to the proxy, the proxy makes the request to the service, and then the proxy passes the result back to the JS.

[GlenCrawford]

@Christo Fur: I've heard that Chrome partially supports Access-Control-Allow-Origin and related headers, but yes, by relying on the Cross-Origin Resource Sharing specification (still in working-draft phase at W3C), you're really only making your website usable by Firefox users...for now.

[GlenCrawford]

I should probably point out that using a proxy may increase traffic and waiting times slightly, because you're now making two requests instead of one. JS --> Proxy --> Service

[ChrisCa]

sure, understood. Well the info is ultimitely to be consumed by a Flash movie. So I thought having the containing page make requests from Javascript might be the best way. But it might be easier of the requests come from within Flash and I just apply a Cross Domain policy

[ChrisCa]

Is it possible to post data using JSONP? or does everything have to be passed in the query string?

[Johan Tidén]

That's just JSONP solving your problem. You don't have to wrap it in a DOM object at all.