title: Chrome jquery ajax to external api error
body: <p>I am using jquery to hit an external api using ajax.</p>
  
  <pre><code>$.ajax({
  
                  url: https://blahblah,
                  method: "GET",                    
                  contentType: "text/plain", 
                  dataType: "json",
                  crossDomain: true,
                  accept: "application/json",
                  async: true,
                  headers: {
                      "Access-Control-Allow-Origin": "*",
                      "Access-Control-Allow-Methods": "GET",
                      "Access-Control-Allow-Headers": "Origin, Content-Type, Accept",
                  success: function (data) { //more code}
  </code></pre>
  
  <p>Everything works great in IE but because of Chrome's Same origin policy its not working. This is the error I am getting in the console</p>
  
  <pre><code>XMLHttpRequest cannot load https://blahblah. 
  Response to preflight request doesn't pass access control check:
  No 'Access-Control-Allow-Origin' header is present on the requested resource.
  Origin 'http://localhost:8889' is therefore not allowed access.
  
  localhost/ Failed to load resource: the server responded with a status of 403 (Forbidden)
  </code></pre>
  
  <p>This is what the headers look like</p>
  
  <pre><code>Response Headers
  HTTP/1.1 200 OK
  Date: Fri, 23 Jun 2017 15:05:44 GMT
  Server: xxxxx
  X-Frame-Options: SAMEORIGIN
  Content-Type: application/json
  Connection: close
  Transfer-Encoding: chunked
  
  
  Request Headers
  view source
  Accept:*/*
  Accept-Encoding:gzip, deflate, sdch, br
  Accept-Language:en-US,en;q=0.8
  Access-Control-Request-Headers:access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,x-frame-options
  Access-Control-Request-Method:GET
  Connection:keep-alive
  Host:blahblah
  Origin:http://localhost:8889
  </code></pre>
  
  <p>Referer:<a href="http://localhost:8889/" rel="nofollow noreferrer">http://localhost:8889/</a></p>
  
  <p>Because this is a .net MVC4 IIS 7.5 app I tried setting the custom headers in WEB.CONFIG file but it didn't work either </p>
  
  <pre><code>&lt;httpProtocol&gt;
    &lt;customHeaders&gt;
  
      &lt;add name="Access-Control-Allow-Origin" value="*"/&gt;
      &lt;add name="Access-Control-Allow-Methods" value="GET"/&gt;
      &lt;add name="Access-Control-Allow-Headers" value="*"/&gt;
  
    &lt;/customHeaders&gt;
  &lt;/httpProtocol&gt;
  </code></pre>
  
  <p>Please help</p>