wcf服务的jQuery ajax POST错误

Question

This is cross-domain ajax request:

$.ajax({
            type: "POST",
            dataType: "jsonp",
            contentType: "application/jsonp",
            data: '{"UserName":"newuser","Password":"pwd"}',
            crossDomain: true,
            async: false,
            url: "http://xxx.xx.xx.xx/MyService/SampleService.svc/GetData",
            jsonpCallback: function (jsonData) {
                console.log(jsonData);
                alert('Hi');
            },
            complete: function (request, textStatus) { 
                alert(request.responseText);
                alert(textStatus);
            },
            error: function (request, textStatus, errorThrown) {
                alert(textStatus);
            }
        });

This is my WCF REST service's method:

namespace SampleServiceRestAPI
{
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
[ServiceBehavior(InstanceContextMode = InstanceContextMode.Single)]
public class SampleService : ISampleService 
{
   ...
   public string GetData(UserData userData)
   {
      string response = "Hi_" + userData.UserName;
      return response;
   }
   ...
}

Interface:

    [WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare, UriTemplate = "GetData")]
    [OperationContract]
    string GetData(UserData userData);

Datacontract:

[DataContract]
public class UserData
{
    [DataMember]
    public string UserName { get; set; }

    [DataMember]
    public string Password { get; set; }
}

And thepart of web.config :

<system.web>
   <compilation debug="true" targetFramework="4.0"/>
   <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"/>    
</system.web>
<system.serviceModel>
<standardEndpoints>
  <webScriptEndpoint>
    <standardEndpoint name="" crossDomainScriptAccessEnabled="true"/>
  </webScriptEndpoint>
</standardEndpoints>
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true" >
  <serviceActivations>
    <add factory="System.ServiceModel.Activation.ServiceHostFactory" relativeAddress="SampleService.svc" service="SampleServiceRestAPI.SampleService"/>
  </serviceActivations>
</serviceHostingEnvironment>
<services>
  <service behaviorConfiguration="ServiceBehaviour" name="SampleServiceRestAPI.SampleService">
    <endpoint address="" behaviorConfiguration="web" binding="webHttpBinding"
      bindingConfiguration="webWinBinding" contract="SampleServiceRestAPI.ISampleService" />        
  </service>
  <!--<service behaviorConfiguration="metadataBehavior" name="MyService">
    <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
  </service>-->
</services>
<behaviors>
  <endpointBehaviors>
    <behavior name="web">
      <webHttp/>
    </behavior>
  </endpointBehaviors>
  <serviceBehaviors>
    <behavior name="ServiceBehaviour">
      <serviceMetadata httpGetEnabled="true" />
      <serviceDebug includeExceptionDetailInFaults="true"  />
    </behavior>
    <behavior name="">
      <serviceMetadata httpGetEnabled="true" />
      <serviceDebug includeExceptionDetailInFaults="true" />
    </behavior>
  </serviceBehaviors>
</behaviors>
<bindings>
  <webHttpBinding>
    <binding name="webWinBinding" maxBufferSize="2147483647" crossDomainScriptAccessEnabled="true" maxReceivedMessageSize="2147483647">

      <readerQuotas maxArrayLength="100000" maxStringContentLength="2147483647" />
    </binding>
  </webHttpBinding>
</bindings>
</system.serviceModel>
  <!--<system.web.extensions>
  <scripting>
  <webServices>
    <jsonSerialization maxJsonLength="2147483644"/>
    <protocols>
      <add name="HttpPost"/>     
      <add name="HttpPostLocalhost"/>   
    </protocols>      
  </webServices>
</scripting>
</system.web.extensions>-->
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
    </customHeaders>
  </httpProtocol>
</system.webServer>
<appSettings>
  <add key="ErrorCodeFile" value="~/App_Data/ErrorCode.txt"/>
</appSettings>

The error I got in the Firebug:

"NetworkError: 500 Internal Server Error - http://173.161.176.229/MyService/SampleService.svc/GetData?callback=undefined& {%22UserName%22:%22newuser%22,%22Password%22:%22pwd%22}&_=1369120080493"

Answer 1

The 500 error indicates that somethings wrong on the serverside. You should examine what is going wrong there. It is possible that you have to look into the WCF part. Perharps this helps: http://msdn.microsoft.com/en-us/library/ms732023.aspx

Answer 2

You cannot usually (see later) make HTTP POSTs to a service on a different domain to the originating one. This is more commonly known as the Same origin policy concept and is a browser security limitation which

prevents access to most methods and properties across pages on different sites

JSONP works be inserting a <script> tag with the src being the URL of the JSONP request, which is an HTTP GET request. The error you are seeing is because the browser is attempting to GET the resource which is throwing a 500 Internal Server Error as I assume GET on that URL is not supported.

If the JavaScript and WCF service are on the same domain you do not need to use JSONP and should be able to do a regular $.ajax() POST.

If the (page in which the) JavaScript and the WCF service are not on the same domain, one way to allow the cross-domain request is to enable CORS on your server. Also, the browser must also support it .