如何配置通过跨域AJAX调用的WCF服务

Question

I'm having a little difficulty configuring my WCF service to allow consumption via cross-domain AJAX.

I've successfully used this service on a client with no problems, but everytime I try to hit it using AJAX (via the $.ajax object in jQuery), I get a 400 error.

Here is my web.config

<?xml version="1.0"?>
<configuration>
    <system.web>
        <compilation debug="true" strict="false" explicit="true" targetFramework="4.0" />
    </system.web>
    <system.serviceModel>
        <bindings>
            <basicHttpBinding>
                <binding name="basicHttpBinding" />
            </basicHttpBinding>
            <mexHttpBinding>
                <binding name="mexHttpBinding" />
            </mexHttpBinding>
            <webHttpBinding>
                <binding name="webHttpBinding" crossDomainScriptAccessEnabled="true">
                    <security mode="None" />
                </binding>
            </webHttpBinding>
        </bindings>
        <services>
            <service name="Services.WebAnalyticsService">
                <clear />
                <endpoint binding="basicHttpBinding" bindingConfiguration="basicHttpBinding"
                 name="WebAnalyticsDotNetClientEndpoint" contract="Contracts.IWebAnalyticsService"
                 listenUriMode="Explicit" />
                <endpoint address="mex" binding="mexHttpBinding" bindingConfiguration="mexHttpBinding"
                 name="WebAnalyticsMetaDataEndpoint" contract="Contracts.IWebAnalyticsService"
                 listenUriMode="Explicit" />
                <endpoint address="script" behaviorConfiguration="aspNetAjaxBehavior"
                 binding="webHttpBinding" bindingConfiguration="webHttpBinding"
                 name="WebAnalyticsAjaxEndpoint" contract="Contracts.IWebAnalyticsService" />
                <!--<endpoint address="web" behaviorConfiguration="RESTBehavior"
                 binding="webHttpBinding" bindingConfiguration="webHttpBinding"
                 name="WebAnalyticsAjaxEndpoint" contract="Contracts.IWebAnalyticsServiceWeb"  />-->
            </service>
        </services>
        <behaviors>
            <endpointBehaviors>
                <behavior name="aspNetAjaxBehavior">
                    <enableWebScript />
                </behavior>
                <!--<behavior name="RESTBehavior">
                    <webHttp helpEnabled="true"/>
                </behavior>-->
            </endpointBehaviors>
            <serviceBehaviors>
                <behavior>
                    <serviceMetadata httpGetEnabled="true" />
                    <serviceDebug includeExceptionDetailInFaults="true" />
                </behavior>
            </serviceBehaviors>
        </behaviors>
        <serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true"/>
    </system.serviceModel>
    <system.webServer>
        <modules runAllManagedModulesForAllRequests="true"/>
    </system.webServer>
        <system.diagnostics>
            <sources>
                <source name="System.ServiceModel"
                    switchValue="Information, ActivityTracing"
                    propagateActivity="true">
                    <listeners>
                        <add name="xml"
                 type="System.Diagnostics.XmlWriterTraceListener"
                 initializeData="c:\log\Traces.svclog" />
                    </listeners>
                </source>
            </sources>
        </system.diagnostics>
</configuration>

And this is my operation contract.

Namespace Contracts

        <ServiceContract()>
 Public Interface IWebAnalyticsService

    <OperationContract(), WebGet(RequestFormat:=WebMessageFormat.Json)>
    Sub SendWaEvent(ByVal eventID As Integer, ByVal eventValue As String, _
      ByVal cookieVisitID As String, ByVal cookieVisitorSession As String, _
      ByVal HTTPXForwardedServer As String, ByVal HTTPXRewriteURL As String, _
      ByVal ScriptName As String, ByVal ServerName As String)

    End Interface

End Namespace

My Ajax call is pretty straightforward, but here it is:

$.ajax({
  type: 'POST',
  crossDomain: true,
  url: 'http://localhost:37490/services/webanalyticservice.svc/SendWaEvent',
  data: Data, //Data is a JSON wrapper I've previously constructed.
  contentType: 'application/javascript;charset=UTF-8'
  success: function(result) {DoSomething(result);},
  error: HandleError
});

[ UPDATES BELOW ]

It's always the things we overlook, isn't it? Anyhow, after being very dismissive of the "straightforward" AJAX call above, it ended up being the problem. To get this working, I had to change my AJAX call to this:

        function SendAJAX() {
            $.ajax({ type: "GET",
                url: URL,
                data: Data,
                dataType: 'jsonp',
                jsonpCallback: 'MyCallBack',
                timeout: 10000,
                crossDomain: true,
                contentType: 'application/json; charset=UTF-8',
                success: function (data, textStatus, jqXHR) { WriteSuccess(data, textStatus, jqXHR) },
                error: function (jqXHR, textStatus, errorThrown) { WriteError(jqXHR, textStatus, errorThrown) },
                complete: function (jqXHR, textStatus) { }
            });
        }

Also, please note that if you are going to be testing locally, you'll need to add the following to your web config or you'll receive a 500 error saying that cross-domain javascript isn't allowed in authenticated services.

<system.web>
    <authentication mode="None" />
</system.web>

You can remove this attribute in your web.release.config using xdt:transform .

Huge shout out to @Rajesh! Great job, man!

Answer 1

Your JQuery function needs to looks as shown below:

function TestingWCFRestWithJsonp() {
                $.ajax({
                    url: "http://localhost:37490/services/webanalyticservice.svc/script/SendWaEvent",
                    dataType: "jsonp",
                    type: "GET",
                    timeout: 10000,
                    jsonpCallback: "MyCallback",
                    success: function (data, textStatus, jqXHR) {
                    },
                    error: function (jqXHR, textStatus, errorThrown) {    
                    },
                    complete: function (jqXHR, textStatus) {
                    }
                });
            }
            function MyCallback(data) {
                alert(data);
            }

Since your endpoint element has the address value set you would need to append that to the end of .svc and then provide the method name as in the sample below.

The crossDomainScriptAccessEnabled property on the binding element identifies if your request has a callback method specified and writes the response back to stream.

NOTE: Test the url from your browser to see if you get a successful response as its a WebGet method