Using ajax to GET a token from external site returns empty response

Question

I have two sites right now. One that has a token and one that is supposed to allow a user to do stuff with the token. When I visit the first site that has the token, mySite.local/services/session/token it shows it: OTV4Gu9VQfjIo2ioQ0thajdEJ6nEINoxsLuwgT_6S0w

When I am on the page that is supposed to GET this token, I get an empty response and the error for the ajax function is thrown.

The weird part is that when investigating the issue with firebug, I can see the response for the ajax request is 43B - the same size as the token. So for some reason the page with the token is being hit properly, but the response is not coming through.

Here is a screenshot of the firebug response: enter image description here

And here is the JQuery with the ajax request:

var nid; //global node id variable
  $('html').click(function(){
    try {
      $.ajax({
        url:"http://mySite.local/services/session/token",
        type:"get",
        dataType:"text",
        error:function (jqXHR, textStatus, errorThrown) {
          alert('error thrown - ' + errorThrown);
          console.log(JSON.stringify(jqXHR));
          console.log(JSON.stringify(textStatus));
          console.log(JSON.stringify(errorThrown));
        },
        success: function (token) {
          //Do some stuff now that token is received
        }
      });
    }
    catch (error) {
      alert("page_dashboard - " + error);
    }
  });

I know it says the IP address is 127.0.0.1, but are you accessing it from the same domain name `mysite.local`? — Steven V, Jul 03 '13 at 16:17
Nope, the one hosting the token would be mysite.local and the other would be mysitemobile.local — CR47, Jul 03 '13 at 16:19
Then your running into cross domain restriction with AJAX (aka [Same Origin Policy](http://en.wikipedia.org/wiki/Same_origin_policy)). You can't make a AJAX request to another domain without using CORS to white list the domain(s), or [JSONP](http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain). — Steven V, Jul 03 '13 at 16:22
Would you post this as the answer so that I may mark the question as solved? — CR47, Jul 03 '13 at 16:35

score 1 · Accepted Answer · answered Jul 03 '13 at 16:37

Your running into the Same Origin Policy which essentially states any request done by client side/browser language like Javascript must be on the same port, with the same domain name and the same protocol. In your case http://mysitemobile.local does not equal http://mysite.local so you're request is being blocked. Firebug's way of displaying that is no response with 43 bytes.

There are two ways to work around this, Cross-origin resource sharing (CORS) or JSONP. CORS is a HTTP header that is added to the server you are requesting to and provides a whitelist of acceptable domains that are allowed break the same origin policy. Most recent browsers support this header.

The other option is JSONP, wraps a JSON object into a Javascript function that is called using <script> tags normally. If the other server returns {status: 0} and you have a function called parseStatus() in your code that the remote server would wrap into parseStatus({status:0}); thus calling your function without having to worry about the same origin policy.

Using ajax to GET a token from external site returns empty response

1 Answers1