Calling wcf rest service from jquery doesn't work

Question

I have written a really simple wcf rest service which seems to work fine when I make requests to it through fiddler but I cannot get it to work when calling it from JQuery.

Service:

[ServiceContract]
public interface IService1
{
    [OperationContract]
    [WebInvoke(Method = "POST",
                UriTemplate = "customers/{regionId}",
                ResponseFormat = WebMessageFormat.Json
    )]
    Customer[] GetCustomers(String regionId);
}

[DataContract]
public class Customer
{
    [DataMember]
    public Guid Id { get; private set; }

    [DataMember]
    public String Name { get; private set; }

    public Customer(Guid id, String name)
    {
        Id = id;
        Name = name;
    }
}

public class Service1 : IService1
{        
    public Customer[] GetCustomers(String regionId)
    {
        return new[]
               {
                   new Customer(Guid.NewGuid(), "john"),
                   new Customer(Guid.NewGuid(), "pete"),
                   new Customer(Guid.NewGuid(), "ralph")                       
               };
    }
}

I can make requests to this service via fiddler and it returns the expected json. However, when I try and call it with JQuery ajax via the firebug console it always fails. Here is the call:

$.ajax({ type: "POST", data: "{}", url: "http://127.0.0.1:8081/json/customers/1", contentType: "application/json; charset=utf-8", dataType: "json", success:function(res) {
alert('success'); }, error: function(xhr) { alert('failed: '+xhr.responseText); } });

I always get the failed alert and the responseText is always blank. Any ideas would be greatly appreciated.

Answer 1

When you say "via Fiddler" do you mean "using Fiddler's request builder" or do you mean "with Fiddler running?"

Question: What URL is your website running on? You cannot generally make XHR requests to different servers (or ports, in FF) using XHR.