JQuery AJAX call fails while other calls to WCF service succeed - wcf

Question

I am trying to set up a simple WCF REST service that we will be able to call from jquery. When I visit the URL in the browser, I get a response back. When I attempt to send an HTTPRequest directly (using the Firefox plugin RESTClient), I get a response back. These responses look correct to me, containing headers and a string of JSON and apparently nothing else.
However, when I call this same service via a jquery.get() or jquery.post() call, nothing happens. Using the jquery.ajax() call reveals the error callback gets called, but to me the data given to the error callback doesn't give me clues as to why this isn't working.
<a id="thelink" href="javascript:void(0)">GO</a>
<script type="text/javascript">
function doAjax() {
$.ajax({type: "POST",
dataType: "json", // see note below
url: "http://localhost:54459/MySimpleService.svc/json/24",
success: function(jqXHR, textStatus) {
alert("success");
},
error: function(jqXHR, textStatus, errorThrown) {
alert("error");
}
});
}
$('#thelink').click(doAjax);
</script>
Note: for the dataType parameter I have tried all of "text", "json", "jsonp" and leaving the parameter off. Similarly, I have tried with both GET and POST (modifying the web service to respond to GET or POST respectively).
The method called at that endpoint doesn't do anything spectacular that should be failing -- it simply concatenates the string to a constant and returns (just testing at this point, it will clearly do more interesting things in the future)
Firefox shows me getting back 200 OK when I click the link.
The WCF service is running out of my Visual Studio 2010 debug environment. It hits breakpoints placed in the method that responds to this service method.
I have tried accessing the html posted above from a file on my local machine (port 80) as well as hosting it elsewhere, with the same results. Could this be a security issue?
The values passed to the error callback don't seem terribly helpful:
jqXHR - readyState : 0, status : 0, statusText : error
textStatus - "error"
errorThrown - ""
So, why does my service seem to work, for GET or POST, when I call the url in a browser or RESTClient, but fail when I attempt to call it from jquery.ajax()?
EDIT: after more tests based on the comments I received, I tried hosting the page with the javascript on the same port as the web service, and this shows success. In my real-world scenarios, I won't have the luxury of hosting the client side code and the web service on the same domain/port. I'm assuming this is a security model issue -- where do I look to allow this sort of access (whitelisting domains/ports or otherwise)

Answer 1

The issue seemed to be in my web.config; as we worked out in comments, the issue is one of cross-domain security. I was already using a webHttpBinding on my endpoint, but did not realize it needed to be configured:
<system.serviceModel>
<bindings>
<webHttpBinding>
<binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true"/>
</webHttpBinding>
</bindings>
...
</system.serviceModel>
Setting crossDomainScriptAccessEnabled="true" seems to have done the trick. Note that I already have <serviceMetadata httpGetEnabled="true"/> as part of my service behavior.

Answer 2

make sure you have already configured your service to be called from script clients: adding a couple of elements in web.config in your service:
<behaviors>
<endpointBehaviors>
<behavior name="webScriptEnablingBehavior">
<enableWebScript/>
</behavior>
</endpointBehaviors>
more info here: http://msdn.microsoft.com/en-us/library/bb763177(v=vs.90).aspx
hope it helps,