Setting response content type header in JSONP request?

Question

I have a use case where I make a cross domain JSONP request.

$.ajax({
  url: "http://anyorigin.com/get/?url=<any_website_url>&callback=?'",
  dataType: 'jsonp',
  success: function(data) {
    console.log(data);
}});

It was working fine but I noticed that for Chinese websites data comes garbled. I debugged this and found out that response-header is always set to:

Response Header: Content-Type:text/javascript; charset=ISO-8859-1

Now this charset ISO-8859-1 is creating a problem. It should have been UTF-8. I basically want to always override this charset to UTF-8. I know I can do this using ajax. I tried using the following code -

$.ajax({
  url: "http://anyorigin.com/get/?url=www.google.com&callback=?'",
  dataType: 'jsonp',
  beforeSend: function(xhr) {
    console.log(xhr);
    xhr.overrideMimeType("text/javascript; charset=utf-8");
  },
  success: function(data) {
    console.log(data);
}});

But this did not fix the problem. I am guessing as JSONP request does not use XHR object, this will not work.

Can anyone tell me how I can achieve this or if it is even achievable? TIA.

Answer 1

What a jsonp request essentially is is an external javascript file being included using <script> tags. Luckily the <script> -element has a charset attribute which you can set UTF-8 . This thus looks something like

<script 
  src="http://anyorigin.com/get/?url=<any_website_url>&callback=myCallbackFunction"
  charset="UTF-8"
></script>

where myCallbackFunction has been previously defined and will be called with the requested data. So what you get is

<script>
  window.myCallbackFunction = function(data){
  }
  // Dynamically insert the previously describe <script> tag here.
</script>

It turns out that this is also directly possible on the jQuery.ajax function opts by setting the scriptCharset property.

Only applies when the "script" transport is used (eg, cross-domain requests with "jsonp" or "script" dataType and "GET" type). Sets the charset attribute on the script tag used in the request. Used when the character set on the local page is not the same as the one on the remote script.

Answer 2

You are correct that JSONP does not use the XHR object, it uses a script tag.

However, this can be done through the jQuery JSONP wrapper using the scriptCharset option.

Excerpt from the jQuery.ajax docs :

scriptCharset

Type: String

Only applies when the "script" transport is used (eg, cross-domain requests with "jsonp" or "script" dataType and "GET" type). Sets the charset attribute on the script tag used in the request. Used when the character set on the local page is not the same as the one on the remote script.

All you have to do to get jQuery to add the UTF-8 charset attribute to the JSONP script tag is add scriptCharset: 'UTF-8' to your AJAX settings object.

Example Code:

$.ajax({
  url: "http://anyorigin.com/get/?url=<any_website_url>&callback=?'",
  dataType: 'jsonp',
  scriptCharset: 'UTF-8',
  success: function(data) {
    console.log(data);
}});