title: Ajax Web Service Call - No 'Access-Control-Allow-Origin' header is present
body: <p>Heyya,</p>
  
  <p>I know this question has been asked before and I have read each and every answer of every single question here but still can't seem to get my project working properly. My scenario is a bit different than other questions though, not sure if this makes any difference but here we go.</p>
  
  <p>I have a project made of web services. Services alone works fine, there is no problem with that. And there is this another project which handles the UI part of things and call these services through jquery ajax. It has been working fine because I haven't tested this case on Google Chrome before. Everything works perfectly on Internet Explorer.</p>
  
  <p>Now; my web service application runs on port 40000 (localhost:40000) and the UI project runs on some other random port but still in the localhost. Like I said, my ajax calls etc works perfectly on Internet explorer but when it comes to Google Chrome it fails. The console shows the following error:</p>
  
  <pre><code>XMLHttpRequest cannot load http://127.0.0.1:40000/abc.asmx/TheMethodName. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:17256' is therefore not allowed access. The response had HTTP status code 400.
  </code></pre>
  
  <p>By the way, it was like "localhost:40000" before so some post on the internet suggested that I should change it to an IP address instead of localhost.</p>
  
  <p>Anyway, I have also edited my web.config file on my web service project and added the following (which doesn't make any sense)</p>
  
  <pre><code>&lt;system.serviceModel&gt;
    &lt;bindings&gt;
      &lt;webHttpBinding&gt;
        &lt;binding name="crossDomain" crossDomainScriptAccessEnabled="true"&gt;
        &lt;/binding&gt;
      &lt;/webHttpBinding&gt;
    &lt;/bindings&gt;
  
    &lt;behaviors&gt;
  
      &lt;serviceBehaviors&gt;
        &lt;behavior&gt;
          &lt;serviceMetadata httpGetEnabled="true" /&gt;
          &lt;serviceDebug includeExceptionDetailInFaults="false" /&gt;
        &lt;/behavior&gt;
      &lt;/serviceBehaviors&gt;
  
    &lt;/behaviors&gt;
  
    &lt;serviceHostingEnvironment multipleSiteBindingsEnabled="true" /&gt;
  &lt;/system.serviceModel&gt;
  
  
  &lt;system.webServer&gt;
    &lt;modules runAllManagedModulesForAllRequests="true" /&gt;
    &lt;httpProtocol&gt;
      &lt;customHeaders&gt;
        &lt;add name="Access-Control-Allow-Origin" value="http://localhost:17256" /&gt;
        &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
        &lt;add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" /&gt;
        &lt;add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" /&gt;
        &lt;add name="Access-Control-Max-Age" value="1728000" /&gt;
  
      &lt;/customHeaders&gt;
    &lt;/httpProtocol&gt;
  &lt;/system.webServer&gt;
  </code></pre>
  
  <p>BTW, if I use the first line:  it completely fails and says the response header messages do not match and I can't even start the service invoke.</p>
  
  <p>And yes, I have also edited my ajax call, added the following parameter:</p>
  
  <pre><code>crossDomain: true,
  </code></pre>
  
  <p>Now, what am I missing here? I have been on this for days now and I am about to lose my mind :) It is kinda too late to change the whole structure of the project (service - UI style I mean) since loads of code have been written to the services and UI projects. Please help I'm desperate! :)</p>
  
  <p>Cheers</p>
  
  <hr />
  
  <p><strong>Edit:</strong></p>
  
  <p>So it turns out I need to use JSONP, not JSON - since it doesn't get stuck with Access Control thing, which is fine. I can convert my ajax calls into JSONP ones. But I need another help :)</p>
  
  <p>I have written a global ajax method that is called from each operation on seperate pages and it works like charm (on Internet Explorer again of course). Now what should I do to convert this wrapper function into a jsonp thingy? </p>
  
  <pre><code>function RemoteCall(WebService, RemoteMethod, RemoteParameters, callbackResult) {
  
  if (RemoteParameters == null || RemoteParameters == "") {
      RemoteParameters = "{ }";
  }
  
  var remoteCall = $.ajax({
      type: "POST",
      url: ProvideService(WebService, RemoteMethod),
      data: RemoteParameters,
      contentType: ajaxContentType,
      dataType: ajaxDataType,
      async: true,
      crossDomain: true,
      success: function (msg) {
          msg.header("Access-Control-Allow-Origin", "*");
          callbackResult(msg.d);
      },
      error: function (xhr, ajaxOptions, thrownError) {
          callbackResult(xhr.status + '\r\n' + thrownError + '\r\n' + xhr.responseText);
      }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>I saw some posts that I should add a property as jsonp: 'jsonp_callback' with the callback method (this is where I am confused). What about this?</p>
  
  <p>Another thing; I have been sending my json parameters as a text in a variable like </p>
  
  <pre><code>var jSONParams = '{ UserID: "1", EmailAddress: "a@b.com" }'; 
  </code></pre>
  
  <p>Should I keep sending this as the same format or should it be converted to some sort of JSON object or something?</p>
  
  <p>BTW: my global ajax function is in a completely seperate JS file - not sure if it makes any difference though...</p>
  
  <p>Cheers</p>