How to natively enable JSONP for existing WCF service?

Solution 1:

Update your config to look like:

<configuration>
  <system.web>
    <compilation debug="true" targetframework="4.0">
    <authentication mode="None">
  </authentication></compilation></system.web>
  <system.webserver>
    <modules runallmanagedmodulesforallrequests="true">
  </modules></system.webserver>
  <system.servicemodel>
    <servicehostingenvironment **aspnetcompatibilityenabled**="true">
    <standardendpoints>
      <webscriptendpoint>
        <standardendpoint **crossdomainscriptaccessenabled**="true" name="">
      </standardendpoint></webscriptendpoint>
    </standardendpoints>
  </servicehostingenvironment></system.servicemodel>
</configuration>

See here for a blog post providing a walkthrough of creating a wcf service that's accessible cross-domain.

This will enable your service to accept requests from cross-domain sources.

In terms of determining whether to pad your response (the p in jsonp),

Thanks to @carlosfigueira for this:

If using .Net 4 JSONP is supported natively. As long as the request has a query string parameter called "callback" (this name can be configured), the response will be padded with the function name .

Otherwise, you'll need to write a custom message inspector that pads the response appropriately.

Solution 2:

The new JSONP feature is exposed via the WebHttpBinding. The configuration for the CustomersService would looks like this:

 <bindings>
    <webHttpBinding>
      <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
    </webHttpBinding>
  </bindings>
  <services>
    <service name="ServiceSite.CustomersService">
      <endpoint address="" binding="webHttpBinding"
                bindingConfiguration="webHttpBindingWithJsonP" contract="ServiceSite.CustomersService"
                behaviorConfiguration="webHttpBehavior"/>
    </service>
  </services>

Consuming JSONP with jQuery

 // Get the JsonP data
 $.getJSON('http://localhost:65025/CustomersService.svc/GetCustomers?callback=?', null, function (customers) {
      alert('Received ' + customers.length + ' Customers');
 });