jquery .ajax cross domain

Question

I have a simple WCF service being called via jquery. When I call the service using http://localhost/WcfService2/Service1.svc/GetUser it works fine. When I call it using the host name, I get an error message "NetworkError". I've tried using jsonp, but that doesn't return a success OR failure - it just disappears into the ether.

My web method is this:

  public string[] GetUser(string Id)
    {
        return ("Joe Bloggs, Pete Smith").Split(',');
    }

My web.config is this:

<?xml version="1.0"?>
<configuration>

  <appSettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5"/>
    <webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
    </webServices>
  </system.web>
  <system.serviceModel>
    <bindings>
      <webHttpBinding>
        <binding name="crossdomain" crossDomainScriptAccessEnabled="true"/>
      </webHttpBinding>
    </bindings>

    <behaviors>
      <serviceBehaviors>
        <behavior name="ServiceBehavior">
          <serviceMetadata httpGetEnabled="true"/>
          <serviceDebug includeExceptionDetailInFaults="true"/>

        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="EndpBehavior">

          <webHttp/>

        </behavior>
      </endpointBehaviors>
    </behaviors>
    <services>
      <service behaviorConfiguration="ServiceBehavior" name="WcfService2.Service1">
        <endpoint address="http://nwdev2012/WcfService2/Service1.svc" binding="webHttpBinding" contract="WcfService2.IService1" behaviorConfiguration="EndpBehavior" bindingConfiguration="crossdomain"/>
      </service>
    </services>
    <!--<serviceHostingEnvironment >
      <serviceActivations>
        <add factory="System.ServiceModel.Activation.WebServiceHostFactory"
             relativeAddress="./wsccc1/wscccService.svc"
             service="WcfService2.Service1"/>
      </serviceActivations>
    </serviceHostingEnvironment>-->
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS" />
        <add name="Access-Control-Max-Age" value="1728000" />
      </customHeaders>
    </httpProtocol>
    <directoryBrowse enabled="true"/>
  </system.webServer>
</configuration>

And my jquery calls are:

function WCFJSON() {
            var userid = 1234;
            Type = "POST";
            Url = "http://localhost/WcfService2/Service1.svc/GetUser";
            Data = '{"value": " + userid + "}';
            ContentType = "application/json; charset=utf-8";
            DataType = "json";
            ProcessData = true;
            CallService();
        }

        function CallService() {
            $.ajax({
                type: Type, //GET or POST or PUT or DELETE verb
                url: Url, // Location of the service
                data: Data, //Data sent to server
                contentType: ContentType, // content type sent to server
                dataType: DataType, //Expected data format from server
                processdata: ProcessData, //True or False
                async: false,
                crossDomain: true,
                success: function (msg) {//On Successfull service call
                    ServiceSucceeded(msg);
                },
                error: ServiceFailed// When Service call fails
            });
        }

        function ServiceSucceeded(result) {
            if (DataType == "json") {
                resultObject = result.GetUserResult;

                for (i = 0; i < resultObject.length; i++) {
                    alert(resultObject[i]);
                }

            }

        }


        function ServiceFailed(result) {
            alert('Service call failed: ' + result.status + '' + result.statusText);
            Type = null;
            varUrl = null;
            Data = null;
            ContentType = null;
            DataType = null;
            ProcessData = null;
        }

I've tried many suggestions from other posts, but nothing works. I know must be very simple, so any suggestions please!

Answer 1

I see two issues here, first, scope of variables, and second, your data variable is wrongly concatenated, try modifying your script as follows:

var Type, Url, Data, ContentType, DataType, ProcessData;
function WCFJSON() {
    var userid = 1234;
    Type = "POST";
    Url = "http://localhost/WcfService2/Service1.svc/GetUser";
    Data = '{"value": ' + userid + '}';
    ContentType = "application/json; charset=utf-8";
    DataType = "json";
    ProcessData = true;
    CallService();
}

Or pass them by parameter:

function WCFJSON() {
    var userid = 1234,
        Type = "POST",
        Url = "http://localhost/WcfService2/Service1.svc/GetUser",
        Data = '{"value": ' + userid + '}',
        ContentType = "application/json; charset=utf-8",
        DataType = "json",
        ProcessData = true,
    CallService(Type, Url, Data, ContentType, DataType, ProcessData);
}

function CallService(Type, Url, Data, ContentType, DataType, ProcessData) {
        $.ajax({
            type: Type, //GET or POST or PUT or DELETE verb
            url: Url, // Location of the service
            data: Data, //Data sent to server
            contentType: ContentType, // content type sent to server
            dataType: DataType, //Expected data format from server
            processdata: ProcessData, //True or False
            async: false,
            crossDomain: true,
            success: function (msg) {//On Successfull service call
                ServiceSucceeded(msg);
            },
            error: ServiceFailed// When Service call fails
        });
    }