JSONP request fails when https is used instead of http

Question

I have an API client which makes a JSONP request using JQuery. Everything works fine when this API client's not using SSL however fails when the SSL is used.

For example I have a URL http://apiclient.com and I am making following JSONP request from this domain:

$.ajax({
    url: url,
    dataType: "jsonp",
    contentType: "application/json; charset=utf-8",
    success: function(data)
    {
        $.each(data.services, function(index, service) {
            processService(service);
        });
    }
});

I see an appropriate request made to API host specified in the url and callback function in success is properly called with properly formatted data passed onto it.

However when I change above URL of the API client to https://apiclient.com, no request is observed at API host. I see no errors in either side of the logs.

Note: only difference is http to https on API client side.

Do you need to handle JSONP request differently when using https domain?

Thanks.

Edit: This issue is only observed with Chrome. It works with Firefox and Safari. However I got a quick warning on FireFox asking I am about to make unencrypted request from encrypted site. I allowed it and never saw the warning again.

Answer 1

Found a solution. Problem was that JQuery and other resources were imported from non-secure sites. Solution was to reference from https.

Answer 2

There shouldn't be any different in JSONP request for http and https.

Try us .getJSON instead:

$.getJSON(url, function(data) {
  $.each(data.services, function(index, service) {
        processService(service);
    });
});

Using jQuery.ajax() will cause cross-browser issue but not the case with jQuery.getJSON() Look at jQuery site for more info: http://api.jquery.com/jQuery.getJSON/

There's similar post with this issue: JSONP To Acquire JSON From HTTPS Protocol with JQuery

Answer 3

Changing the protocol is the same effect as changing any other part of the URL -- it will trigger a violation of the same-origin policy and force you into cross-domain mode. If you already have cross-domain access working, it will continue to work with https as well as it did with http.

you can use getJSON for example

$.getJSON('ajax/test.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

check complete getJSON documentation http://api.jquery.com/jQuery.getJSON/

will i was wrong ... using Juqery.ajax will cause cross-browser issue but not with Jquery.getJSON

http://docs.jquery.com/Release:jQuery_1.2/Ajax#Cross-Domain_getJSON_.28using_JSONP.29

here is an example of cross-domain get JSON

firefox has a problem with HTTPS, as i know it will be fixed if you send your request like this

$.getJSON('ajax/test.json',{}, function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

soruce AJAX https POST requests using jquery fail in Firefox

i hope this helps