Question

I am facing an error when calling a WCF method from jQuery.
The call returns just fine when I implement it on localhost but throws an access denied error when the service is hosted on a separate server.

Here are the steps to reproduce the error:-

1. Run the project locally and check if the service is running
   e.g.:http://localhost:3369/AppsterWcfService.svc/DoWork

2. Create a test client (test.html) page locally and run this project.
   When clicked on the login button it works fine.

3. Now host the service on a remote server and replace the url with the new url i.e. url of the hosted service.

4. Now run the test.html page, click on the button. Here I get access denied error.

I have tried various methods of accessing the server e.g.:-

1. By using MVC
2. Handler
3. simple .aspx page
4. Adding different parameters in the jquery ajax call and web.config file.
5. given different permissions in iis. like network service, iuser, anonymous, guest etc.

I suppose it is some kind of cross-domain related issue with jQuery.
Any help will be appreciated.

Thanks,
-Sumit

Answer 1

For you to consume a cross domain WCF REST service using jQuery please find a sample below:

My Service looks as below:

    [ServiceContract]
    public interface IJSONPService
    {
        [OperationContract]
        [WebGet]
        string GetDate();

        [OperationContract]
        [WebInvoke]
        string PostData(string name);
    }

Now my config entries for the above service looks as shown:

<services>
    <service name="Service.JSONPService">
        <endpoint address="" binding="webHttpBinding" behaviorConfiguration="json" bindingConfiguration="defaultRestJsonp" contract="Service.IJSONPService">
        </endpoint>
    </service>
</services>
<behaviors>
      <endpointBehaviors>
         <behavior name="json">
             <enableWebScript />
         </behavior>
   </behaviors>
</endpointBehaviors>
<webHttpBinding>
        <binding name="defaultRestJsonp" crossDomainScriptAccessEnabled="true">
          <readerQuotas maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxDepth="64" maxNameTableCharCount="2147483647" />
          <security mode="None" />
        </binding>
</webHttpBinding>

You need to note the crossDomainScriptAccessEnabled attribute in the binding element “defaultRestJsonp” which takes care of determining the request to be for JSONP and appropriately converting the response to be wrapped in the callback method from the URL which comes as a query string

Now from your page do the below JavaScript that calls the above WCF REST service as shown:

function TestingWCFRestWithJsonp() {
                $.ajax({
                    url: "http://domain.com/Service/JSONPService.svc/GetDate",
                    dataType: "jsonp",
                    type: "GET",
                    timeout: 10000,
                    jsonpCallback: "MyCallback",
                    success: function (data, textStatus, jqXHR) {
                        alert(data);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {alert('error');

                    },
                    complete: function (jqXHR, textStatus) {alert('complete');
                    }
                });
            }
            function MyCallback(data) {
                alert(data);
            }

Check out the jsonpCallback property in the $.ajax method call.

The raw request to the web service call looks as below:

GET http://localhost/Service/JSONPService.svc/GetDate?callback=MyCallback&_=1343391683779 HTTP/1.1
Host: localhost
Connection: keep-alive

And the raw response from the WCF REST service looks as below:

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: application/x-javascript
Date: Fri, 27 Jul 2012 12:21:23 GMT
Content-Length: 27

MyCallback("27\/07\/2012");

NOTE: When you perform a JSONP request your $.ajax methods error/complete/success are not called.