400 Bad request when trying to contact WCF using XHR

Question

I am making a WCF web service that will return a json object, but I keep getting a 400 error when trying to make an AJAX call:

OPTIONS http://localhost:55658/WebServiceWrapper.svc/GetData?_=1318567254842&value=97            HTTP/1.1
Host: localhost:55658
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
DNT: 1
Connection: keep-alive
Origin: http://localhost:3000
Access-Control-Request-Method: GET
Access-Control-Request-Headers: content-type

HTTP/1.1 400 Bad Request
Server: ASP.NET Development Server/10.0.0.0
Date: Fri, 14 Oct 2011 04:40:55 GMT
X-AspNet-Version: 4.0.30319
Cache-Control: private
Content-Length: 0
Connection: Close

Here is my AJAX call:

$.ajax({
  contentType: 'application/json',
  url: 'http://localhost:55658/WebServiceWrapper.svc/GetData',
  dataType: 'json',
  data: {
    value: 97
  },
  success: function (data) {
    alert('success' + data);
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert('failure' + errorThrown);
  }
});

Here is my WCF service definition:

public class WebServiceWrapper : IWebServiceWrapper
{
    public object GetData(int value)
    {
        return new 
        {
            ReturnValue = string.Format("You entered: {0}", value)
        };
    }
}

And this is the interface:

[ServiceContract]
public interface IWebServiceWrapper
{
    [OperationContract]
    object GetData(int value);
}

I know that I solved this problem before, but I don’t remember what I did before. Any help would be greatly appreciated as the hole that I put into the wall is getting bigger and bigger.

Answer 1

There are a few things you might need (or check to see if you were done):

Your GetData OperationContract function must be decorated with the [WebGet] attribute.

    [WebGet]
    [OperationContract]
    object GetData(int value);

WebServiceWrapper [AspNetCompatibilityRequirements] ( System.ServiceModel.Web, )

    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class WebServiceWrapper : IWebServiceWrapper

GetData . JavaScriptSerializer json

    var serializer = new JavaScriptSerializer();
    return serializer.Serialize(new
                                {
                                    ReturnValue = string.Format("You entered: {0}", value)
                                });

, [webHttpBinding] ( )

<endpoint ... binding="webHttpBinding" ... />

, , , - script

<endpointBehaviors>
    <behavior name="[endpointBehaviorName]">
        <enableWebScript/>
    </behavior>
</endpointBehaviors>

, , ()

<endpoint ... behaviorConfiguration="[endpointBehaviorName]" ... />

Answer 2

, OPTIONS, GET, , jQuery , - XHR-, . :

OPTIONS GET?

, OPTIONS, , 400.

, - -, HTTP- WCF.

Answer 3

It looks like you are violating the same restriction of origin policy . You cannot send cross-domain AJAX requests. Your application is hosted on http://localhost:3000, and you are trying to send an AJAX request to http://localhost:55658. It's impossible. You can send AJAX requests only to http://localhost:3000. You can use JSONP to get around this limitation. And here is another article on MSDN.