Calling a WCF service with jQuery ajax

Question

I created a WCF service with a method declared as follows

[OperationContract]
[WebInvoke(UriTemplate="getDashBoard", Method="POST", BodyStyle=WebMessageBodyStyle.WrappedRequest, RequestFormat=WebMessageFormat.Json, ResponseFormat=WebMessageFormat.Json)]
getDashBoard object (string strGroups);

which returns a

List<Dictionary String, Object> rows = new List<Dictionary String, Object>();

serialized by JavaScriptSerializer

serializer.Serialize ( rows) ;

client-side i call the webservice method in this way

$.ajax ({
    type: " POST" ,
    url: url ,
    headers : {" Access -Control- Allow- Origin" , " *", " Access -Control- Request- Method" , " POST "},
    dataType : " json " ,
    contentType : "application / json ; charset = utf -8" ,
    date : ' {" strGroups ": " ISPB "} ' ,
    success : function ( data) {
        var content = JSON.parse ( data);
        $.each(content, function(i, item) {
            console.log(i) ;
        });
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(" getDashBoard " + textStatus) ;
    }
});

with Firefox the call to the WS returns this error " NetworkError : 405 Method Not Allowed . Locked request multiorigine (cross- origin) : the criterion of the origin does not allow the reading of the remote resource http:// .... You can solve the problem ... by moving the resource on the same domain or activating CORS . "

with the debugger IE return data appear correctly formatted and the object "content" has all the correct values ​​; but the cycle doesn't work: it returns "Character is not valid"

help meeeeee ! i'm desperate :o

Thanks Cinzia

Answer 1

You must activate CORS on your WCF Service on the server-site. CORS is used to get arround the same-origin-policy. Here is a good resource about this.

Basically you first have to add a message inspector and later on you have to add the CORS-Heder to the response:

requiredHeaders.Add("Access-Control-Allow-Origin", "*");
requiredHeaders.Add("Access-Control-Request-Method", "POST,GET,PUT,DELETE,OPTIONS");
requiredHeaders.Add("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");

endpointDispatcher.DispatchRuntime.MessageInspectors.Add(new CustomHeaderMessageInspector(requiredHeaders));

The differed behavior in IE and FF comes from the preflighted OPTIONS call from FF (description). If you enable CORS on your WCF-Service (like descried above), it should work in both browsers.

As an alternative you can run your service call on the same domain, but this depends on your requirements.

Answer 2

Thank you very much for your answer. The problem is that even if i work on the SAME DOMAIN i have the same error "SCRIPT1014: Invalid character" on

$.each(content, function(i, item) {
        console.log(i) ;
    });

if i delete the rows code about the cycle, IE shows me the data return as below:

[{"Descr":"Altro","percValore":0.003},{"Descr":"altro 2","percValore":0.100}]

it seems correct!!! FireFox doesn't show nothing! Maybe the problem is not the cross domain but the response? Thank you Cinzia

Answer 3

try this :

$.ajax ({
type: " POST" ,
url: url ,
crossDomain : true,
dataType : " json " ,
date : ' {" strGroups ": " ISPB "} ' ,
success : function ( data) {
    var content = JSON.parse ( data);
    $.each(content, function(i, item) {
        console.log(i) ;
    });
},
error: function (jqXHR, textStatus, errorThrown) {
    alert(" getDashBoard " + textStatus) ;
}

});