JSONP working in Chrome but not in Firefox/IE?

Question

I'm developing a mobile site and I'm using JSONP requests via jQuery to contact the data server to retrieve info for displaying on the mobile site. I was told not to use a PHP script as a proxy since it would cause extra unnecessary load on the mobile server (millions of users) and to strictly do this client-side. I'm using the following code:

var get_vars = '&callback=?&var=here';

$.ajax({
    url: "http://server.com/script?" + get_vars,
    type: "GET",
    dataType: 'jsonp',
    //xhrFields: { withCredentials: true },
    //crossDomain: true,
    success: function(data){
        console.log(data)
    }
});

The server uses cookie authentication to determine if the user is logged in before returning data. Strangely enough, this code worked once on Firefox. Subsequent reloads/refreshes of the page resulted in the credentials not being verified by the server. At first I thought it was due to some changes to my code but after testing it in Google Chrome, it works 100% of the time. There are no JS errors displayed in the console for Firefox/IE either. I made sure this wasn't a caching issue and also tried this on another machine with Firefox, to no avail. This issue also happens on Windows Phone and the latest version of Internet Explorer on Windows 8. I'm assuming it must be cookie-related and somehow the credentials aren't being passed to the remote server.

As for trying to use CORS... I tried it (as you can see the commented out bits, plus I tried adding $.support.cors = true), and couldn't get it to work. I kept getting the "cross domain unauthorized" error, despite having the server send out the following headers:

Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: *

Anyone have any clue what could be causing this? I'd like to get this working with JSONP since it is working in Chrome already.

Extra notes: It appears another developer isn't having the same issues as me. He is reporting that it's working in Firefox 100% of the time. I even tried the following:

• Loading up Firefox in a Virtual Machine and ran into the same problems (to ensure not an OS issue)
• Cleared cache on my phone, disabled wifi, and connected via a separate IP with same issue

Ugh. I'm starting to think it might be on the server-side, although I'm not sure why it would be, since it was working 100% fine when I was using PHP.

Answer 1

It looks like I had forgotten to change the method I was using to login via AJAX. I was only using the JSONP method on the data calls after being logged in. When using CORS, it seems to keep the cookie data separate and so the remote server was not reading the cookie data properly.

TLDR; Don't mix CORS and JSONP together - make sure to use one or the other to ensure you don't run into this issue yourself!