CODEWITHSUNDEEP
jqueryiis-7.5cors
Hopwise
Hopwise

Reputation: 293

CORS preflight not returning

I'm working on implementing CORS so that my Ember app can talk to an API on another server. There are two requests that I need to send: an authentication request via POST and then a GET request to one of the API endpoints.

Both requests kick off preflight requests. The authentication preflight request runs fine. Then when I run a request to the API, the preflight request hangs. Chrome shows the status and type as "Pending" and the request never finishes.

This is the authentication code. I'm using jQuery 1.10.2 here.

  $.ajax({
    type: 'POST',
    url: 'https://blahblahblah.edu/AstraDev/Logon.ashx',
    data: "{username: '', password: ''}",
    contentType: 'text/json',

    xhrFields: {
      withCredentials: false 
    },

    headers: {
    },

    success: function(response) {
      console.log(response);
    },

    error: function(response) {
      console.log(response);
    }
  });

And the very similar code for the API GET request

  $.ajax({
    type: 'GET',
    url: 'https://blahblahblah.edu/AstraDev/~api/query/room',
    data: {fields: "Id"},
    contentType: 'application/json; charset=utf-8',
    xhrFields: {
      withCredentials: true 
    },
    headers: {
    },
    success: function(response) {
      console.log(response)
    },
    error: function(response) {
      console.log(response)
    }
  });

If I change the GET's content type to something that doesn't preflight (like "text/plain"), the request fails. But if I do anything that preflights, the preflight hangs.

And here's the relevant server configuration. I'm working with IIS 7.5.

<httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://localhost:8888" />
       <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS" />
       <add name="Access-Control-Allow-Headers" value="Content-Type" />
       <add name="Access-Control-Allow-Credentials" value="true" />
    </customHeaders>
</httpProtocol>

CORS is pretty new to me. So maybe I'm missing something obvious. Any ideas? Thanks.

Upvotes: 3

Views: 1213

Answers (1)

Rudy Hinojosa
Rudy Hinojosa

Reputation: 1468

There could be a number of reasons without seeing the response headers. But here is what I've found when dealing with PreFlight issues. Here's a JavaScript example of dealing with the json body after a preflight check. The initial xhr.open does a preflight check with the teamviewer server. You only send the bare minimum of request headers as required to satisfy the preflight. The json body get's sent when preflight passes.

 function createsession(groupid, meetwith) {

   var xhr = new XMLHttpRequest();
   var url = 'https://webapi.teamviewer.com/api/v1/sessions';
   var jbody = JSON.stringify({"groupid": groupid,
                               "description": "Global Manager Intervention",
                               "end_customer": { "name": "" + meetwith + "" }
                            });

   callTVAPI();

   function callTVAPI() {
      if (xhr) {
         xhr.open('POST', url, true);
         xhr.setRequestHeader('Content-Type', 'application/json');
         xhr.setRequestHeader('Authorization', 'Bearer @(ViewBag.TeamViewerToken)');
         xhr.onreadystatechange = function () {
            if (xhr.readyState !== XMLHttpRequest.DONE) {
                return;
            }
            if (xhr.status !== 200) {
                return;
            }
        
           var data = jQuery.parseJSON(xhr.response);
           alertify.success("Launching: " + data.supporter_link);
           
     };
     xhr.send(jbody);
   }
  }
 }

Upvotes: 1

Related Questions