CODEWITHSUNDEEP
jquerywcfrestjsonp
Kunal
Kunal

Reputation: 1943

Cross Domain jQuery Ajax Request & WCF REST Service

I am calling (Ajax Request) a WCF REST service and the request is a cross domain request.

If I deploy my service in the same domain, everything works like cream. Eventually in production, the service will be in a different domain.

I am using jQuery 1.5.2. My service returns me an error saying:

errorThrown: "jQuery15208493315000087023_1334089616458 was not called"
textStatus: "parsererror"

Although in Firefox I can see the JSON values but execution falls to the error handler of Ajax request.

My Ajax request is:

function CallService() {
    $.ajax({
        type: "GET", 
        url: "http://SomeService/EmpService.svc/GetValues?dv=1455",
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp", 
        processdata: false,            
        success: function (data) {
            ServiceSucceeded(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            debugger;
            alert("Service Error");
            ServiceFailed(jqXHR, textStatus, errorThrown);
        }
    });
}

On WCF Service side, I have configured CrossDomainScriptAccess to true:

<webHttpBinding>
  <binding name="webHttpBindingWithJsonP"
           crossDomainScriptAccessEnabled="true" />
</webHttpBinding>

JSON response which I get from the server is:

[{"Message": "Stop On Duty", "MessageTime": "\/Date(1334068773893-0500)\/"},
 {"Message": "Start On Duty", "MessageTime": "\/Date(1334068763540-0500)\/"},
 {"Message": "App_testing_4102012924am", "MessageTime": "\/Date(1334068533627-0500)\/"},
 {"Message": "Kunal_testing_4102012924am", "MessageTime": "\/Date(1334067945510-0500)\/"},
 {"Message": "Alert: Door Open", "MessageTime": "\/Date(1334066280963-0500)\/"}]

Am I missing anything here in the settings. Entire code works fine if the service is moved to the same domain.

I looked into similar post but couldn't make this work.

Upvotes: 7

Views: 11108

Answers (3)

anupama
anupama

Reputation: 1

 [OperationContract]
    [WebGet( ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare, RequestFormat=WebMessageFormat.Json,
    UriTemplate = "GetEmployeeJson")]
     List<EmployeeData> GetEmployeeJson();

Web.config 

  <bindings>
      <webHttpBinding>
          <binding name="webHttpBindingWithJsonP"
                   crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
  </bindings>
  <behaviors>
      <serviceBehaviors>
          <behavior name="WcfExample.Service1Behavior">
              <serviceMetadata httpGetEnabled="true"/>
              <serviceDebug includeExceptionDetailInFaults="true"/>
          </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
          <behavior name="WebBehavior">
              <webHttp/>
          </behavior>
      </endpointBehaviors>
  </behaviors>
  <services>
      <service behaviorConfiguration="WcfExample.Service1Behavior" name="WcfExample.Service1">
          <endpoint address="" binding="webHttpBinding" contract="WcfExample.IService1" bindingConfiguration="webHttpBindingWithJsonP" behaviorConfiguration="WebBehavior" />
      </service>
  </services>

Jquery ajax call to wcf service

  $.ajax({
            type: "GET",
            contentType: "application/javascript",
            crossDomain: true,
            dataType: 'jsonp',
            cache: true,
            url: 'http://localhost:49349/Service1.svc/GetEmployeeJson',
            success: function (data) {
                var html = [];

                alert(data[0].lastname);


                $.each(data, function (index, value) {
                    $("#TableID").append("<tr><td>" + value.HREmpId + "</td><td>" + value.firstName + "</td><td>" + value.lastname + "</td><td>" + value.address + "</td><td>" + value.city + "</td></tr>");

                });


            },

            error: function (xhr, ajaxOptions, thrownError) {
                alert("here error");
                alert(thrownError);
                if (xhr != null) {

                    var err = JSON.parse(xhr.responseText); //you can throw a code-behinde Exception and it will automatically                                                 //render to a valid JSON string when we rerieve the responseText
                    alert("ErrorMessage: " + err.Message + " StackTrace: " + err.StackTrace);

                }
            }
        });

Upvotes: 0

Martin Carlsson
Martin Carlsson

Reputation: 306

I needed to also add <webHttpEndpoint> to get it work:

<standardEndpoints>
    <webHttpEndpoint>
        <standardEndpoint crossDomainScriptAccessEnabled="true"></standardEndpoint>
    </webHttpEndpoint>
    <webScriptEndpoint>
         <standardEndpoint crossDomainScriptAccessEnabled="true"></standardEndpoint>
    </webScriptEndpoint>
</standardEndpoints>

<bindings>
    <webHttpBinding>
        <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
    </webHttpBinding>
</bindings>

Upvotes: 2

Kunal
Kunal

Reputation: 1943

Well I figured out on my own. Solution was to modify the configuration file holding the service details

I added Standard Endpoint and the binding in the config file 

<standardEndpoints>
      <webScriptEndpoint>
       <standardEndpoint crossDomainScriptAccessEnabled="true">
       </standardEndpoint>
      </webScriptEndpoint>
      </standardEndpoints>



  <bindings>

  <webHttpBinding>
    <binding name="webHttpBindingWithJsonP"
             crossDomainScriptAccessEnabled="true" />
  </webHttpBinding>

Upvotes: 5

Related Questions