Consuming a WCF Service in jQuery via AJAX Call in a different Project (Cross Domain)

Question

I'm using a WCF jQuery AJAX Call Sample which I have downloaded. I can run this and make it work in the same project. When I access the same from a different project in the same solution, it does nothing. The following is the method I'm calling.

    function WCFJSON() {

        var parameter = "1234567890 (Cross Domain)";
        Type = "GET";
        Url = "http://localhost:52729/jQueryWebSite/Service.svc/Test?Id=" + parameter;
        Data = '{"Id": "' + parameter + '"}';
        ContentType = "application/json; charset=utf-8";
        DataType = "jsonp"; ProcessData = false;
        CallService();
    }

    $(document).ready(function () {
        WCFJSON();
    });

I have alert()'s in Success and Failure methods.

When I run the URL directly in the browser, it returns me the result. But if I run this from a different project, it does nothing. No alerts, No results.

Following is my Web.Config of the Project Where my Service is running;

<?xml version="1.0"?>
<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
    <compilation debug="true">
        <assemblies>
            <add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
            <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add assembly="System.Data.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/></assemblies>
    </compilation>
    <authentication mode="Windows"/>
</system.web>
<system.codedom>
    <compilers>
      <compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
        <providerOption name="CompilerVersion" value="v3.5"/>
        <providerOption name="WarnAsError" value="false"/>
      </compiler>
    </compilers>
  </system.codedom>
    <system.serviceModel>
        <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="Service">
                <endpoint address="" binding="webHttpBinding" contract="IService" behaviorConfiguration="EndpBehavior"/>
            </service>
        </services>
    </system.serviceModel>
</configuration>

Is there something to do with Web.config or anything wrong in the script? I have followed many methods and tried out various ways.

Answer 1

I could not find any solution for a cross domain WCF jQuery AJAX Call. Therefore, I'm posting here that how I have solved this issue.

There is no need to give data when I use GET method in AJAX Call.

The things that you must consider when consuming WCF in jQuery AJAX call (cross domain);

1. Run the WCF Service Project in separate instance of Visual Studio. Do not mix WCF Service Project and Consuming Project in one instance and run at once. When you run the consuming project, the WCF Project must already be up and running.
2. Use DataType as jsonp instead of json.
3. In web.config of WCF Project, make sure you have the attribute crossDomainScriptAccessEnabled="true" in <binding> tag under <system.serviceModel>\<bindings>\<webHttpBinding>. Also the binding name set to bindingConfiguration attribute in the <endpoint> tag.

For futher information, Following is my jQuery AJAX Call;

$.ajax({
   cache: false,
   type: "GET",
   async: false,
   processData: true,
   data: "",
   url: "http://localhost:64973/Account.svc/GetAccountByID/2000",
   contentType: "application/json",
   dataType: "jsonp",
   success: function (result) {
       alert(result);
       alert(result.GetAccountByIDResult);
   }
});

Following is my web.config;

<?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"/>
  </system.web>
  <system.serviceModel>
    <bindings>
      <webHttpBinding>
        <binding name="crossDomain" crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>
    <behaviors>
      <endpointBehaviors>
        <behavior name="tSeyvaWCFEndPointBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="tSeyvaServiceBehavior">
          <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <protocolMapping>
      <add binding="basicHttpsBinding" scheme="https" />
    </protocolMapping>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
    <services>
      <service name="tSeyva.WCF.Account" behaviorConfiguration="tSeyvaServiceBehavior">
        <endpoint address=""
                  behaviorConfiguration="tSeyvaWCFEndPointBehavior"
                  bindingConfiguration="crossDomain"
                  binding="webHttpBinding"
                  contract="tSeyva.WCF.IAccount">
        </endpoint>
      </service>
    </services>
  </system.serviceModel>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <!--
        To browse web app root directory during debugging, set the value below to true.
        Set to false before deployment to avoid disclosing web app folder information.
      -->
    <directoryBrowse enabled="true"/>
  </system.webServer>
</configuration>