Can not call to Wcf Service from JavaScript

Question

I have a WCF service, I use it through JS by using Jquery calls.

The code looks like this:

IService1.cs:

[ServiceContract]
public interface IService1
{
    [WebInvoke(Method = "POST",
    BodyStyle = WebMessageBodyStyle.Wrapped,
    RequestFormat = WebMessageFormat.Json,
    ResponseFormat = WebMessageFormat.Json)]
    [OperationContract]
    User GetUser(string userName, string password);
}

Service1.cs:

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1 : IService1
{   
    public User GetUser(string userName, string password)
    {
        //DO SOMETHING
    }
}

Hosting done by IIS:

<%@ ServiceHost Language="C#" Debug="true" Service="MyProjectName.Service1" CodeBehind="Service1.svc.cs" %>

Web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.web>
    <compilation debug="true"/>
    <identity impersonate="false" />
  </system.web>
  <system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="EndpBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="ServiceBehavior">
          <serviceMetadata httpGetEnabled="True"/>
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" 
                               multipleSiteBindingsEnabled="true" />
    <services>
      <service name="MyProjectName.Service1" 
               behaviorConfiguration="ServiceBehavior">
        <endpoint address="" 
                  behaviorConfiguration="EndpBehavior" 
                  binding="webHttpBinding" 
                  contract="MyProjectName.IService1" />
      </service>
    </services>
    <standardEndpoints>
      <webHttpEndpoint>
        <standardEndpoint name="" />
      </webHttpEndpoint>
    </standardEndpoints>
  </system.serviceModel>
</configuration>

In my java script page I call to GetUser function like that :

function CallService() {
    jQuery.ajaxSetup({
        error: function (x, e) {
            if (x.status == 0) {
                alert('You are offline!!\n Please Check Your Network.');
            } else if (x.status == 404) {
                alert('Requested URL not found.');
            } else if (x.status == 500) {
                alert('Internal Server Error.');
            } else if (e == 'parsererror') {
                alert('Error.\nParsing JSON Request failed.');
            } else if (e == 'timeout') {
                alert('Request Time out.');
            } else {
                alert('Unknow Error.\n' + x.responseText);
            }
        }
    });
    var request = { userName: "aaa", password: "123" };
    var jsondata = JSON.stringify(request);

    $.ajax({
        type: "POST", //GET or POST or PUT or DELETE verb
        url: "http://localhost:xxxx/Service1.svc/GetUser", // Location of the service
        data: jsondata, //Data sent to server
        contentType: "application/json; charset=utf-8", // content type sent to server
        dataType: "json", //Expected data format from server
        processdata: true, //True or False
        crossDomain: true, //True or False
        success: function (result) {
           alert('success');
        }
    });
}

And although I can raise the service in the browser, I keep getting the error:

You are offline!! Please Check Your Network.

I can not find anything to help me solve it, anyone have an idea?

Answer 1

I think your problem is that your WS doesn't allow crossDomain access.

You can try adding the next code to your Web.config:

<configuration>
    <system.webServer>      
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="Content-Type" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
    <!-- Rest of your code -->
</configuration>

Answer 2

Don't know if you tried but use jsonp for cross site scripting.
Here is an example i found on the web. XSS-WCF-From-JQuery

Using JSONP is one technique to get around the limitations imposed by the same origin policy. JSONP has its pros and cons. Spend some time to research other methods that might better benefit your project requirements.