title: Calling WCF service from jQuery in asp.net
body: <p>I'm trying to call a WCF service using jQuery in asp.net</p>
  
  <p>WCF service and asp.net website is under the same solution, however they run in different ports as below</p>
  
  <pre><code> WCF - http://127.0.0.1:54443/Service1.svc/
   asp.net - http://127.0.0.1:57484/WebSite2/
  </code></pre>
  
  <p>Below is the WCF function code</p>
  
  <pre><code>[WebInvoke(Method = "GET",RequestFormat = WebMessageFormat.Json,ResponseFormat = WebMessageFormat.Json)]
  
          public List&lt;string&gt; getCurrentTime()
          {
              List&lt;string&gt; lstrSampleDate = new List&lt;string&gt;();
              lstrSampleDate.Add(DateTime.Now.TimeOfDay.ToString());
              return lstrSampleDate;
          }
  </code></pre>
  
  <p>and below is jquery code</p>
  
  <pre><code> $.ajax({
  
                   type: "GET",
                   url: "http://127.0.0.1:54443/Service1.svc/getCurrentTime",
                   // crossDomain: true,
                   datatype: "json",
                   success: function (rVal) {
                       //console.log
                       alert(rVal);
                   },
                   error: function (xhr, status) {
                       //console.log
                       alert('Error: ' + xhr.statusText + 'Status: ' + xhr.status);
                   },
                   complete: function (xhr, status) {
                       //console.log
                       alert("The request is completed!");
                   }
               });
  </code></pre>
  
  <p>When i execute the code i get the below error get printed in console</p>
  
  <blockquote>
  <pre><code>&gt; XMLHttpRequest cannot load
  &gt; http://127.0.0.1:54443/Service1.svc/getCurrentTime. Origin
  &gt; http://127.0.0.1:57484 is not allowed by Access-Control-Allow-Origin.
  </code></pre>
  </blockquote>
  
  <p>As a work-around i did add the below settings to config file (of website)</p>
  
  <pre><code>&lt;system.webServer&gt;
      &lt;modules runAllManagedModulesForAllRequests="true"/&gt;
  &lt;httpProtocol&gt;
        &lt;customHeaders&gt;
          &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
        &lt;/customHeaders&gt;
  &lt;/httpProtocol&gt;
  &lt;/system.webServer&gt;
  </code></pre>
  
  <p>and still did get any fruitful result.  can anyone point me where i'm missing?</p>
  
  <p>Note: I've replaced 'localhost' with 127.0.0.1
  Thanks</p>