jQuery cross-domain Ajax. Why is my code working?

#1

My understanding is that if it is a cross-domain request, we are supposed to set dataType to “jsonp”. Which I did, but then it did not work. I got the following error message in the console:

Refused to execute script from ‘http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_p…page]=1&callback=jQuery31105215916043980608_1487877164531&=1487877164532’ because its MIME type (‘application/json’) is not executable, and strict MIME type checking is enabled.

But when I set it to “json”, it worked.
Can anyone explain why?

Here is my code:

$("#btn-one-quote").on(“click”, function(){
$.ajax({
url: “http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1”,
cache: false,
dataType: “json”,
success: function(quote){
$("#one-quote-output").html(quote[0].content);
}
});
});

#2

There’s another, newer way of making cross-origin request: CORS. If a provider (server) supports it, a client can just send normal requests without any additional setup. That’s why your request succeeded.

If you want to use jsonp, you need to provide an additional parameter ( _jsonp) to your query string to inform the provider that’s the format you want to use (as you can read in api docs).

#3

Thank you for your answer.

Could you please elaborate on this:

you need to provide an additional parameter ( _jsonp) to your query string

How do I do that? Is it a setting in $.ajax(); if so which one? I can’t seem to find that in the jQuery API (http://api.jquery.com/jquery.ajax/).

Also, do I need to always do that, or only when the server supports CORS?

#4

Best way to fetch the data:

$('#your-button').on('click', function(e) {
    e.preventDefault();
    $.ajax( {
      url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: yourCallback,
      cache: false
    });
  });
});

more about cors and jsonp

#5

Thank you for your answer.

1 Like
#6