在 JSONP 请求中设置响应内容类型标头？

Question

我有一个用例，我发出跨域 JSONP 请求。

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

它工作正常，但我注意到中文网站的数据出现乱码。我对此进行了调试，发现 response-header 始终设置为：

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

现在这个字符集 ISO-8859-1 正在制造一个问题。它应该是 UTF-8。我基本上想始终将此字符集覆盖为 UTF-8。我知道我可以使用 ajax 做到这一点。我尝试使用以下代码 -

$.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);
}});

但这并没有解决问题。我猜因为 JSONP 请求不使用 XHR 对象，这将不起作用。

谁能告诉我如何实现这一目标，或者它是否可以实现？ TIA。

Answer 1

jsonp 请求本质上是一个使用<script> 标签包含的外部javascript 文件。幸运的是<script>-元素有一个charset 属性，你可以设置UTF-8。因此，这看起来像

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

其中myCallbackFunction 先前已定义，并将使用请求的数据进行调用。所以你得到的是

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

事实证明，这也可以通过设置 scriptCharset 属性直接在 jQuery.ajax 函数 opts 上实现。

仅在使用“脚本”传输时适用（例如，具有“jsonp”或“脚本”数据类型和“GET”类型的跨域请求）。在请求中使用的脚本标记上设置charset 属性。当本地页面上的字符集与远程脚本上的字符集不同时使用。

Answer 2

JSONP 不使用 XHR 对象是正确的，它使用script 标记。

但是，这可以通过使用 scriptCharset 选项的 jQuery JSONP 包装器来完成。

摘自jQuery.ajax docs:

scriptCharset

类型：字符串

仅适用于“脚本”传输 已使用（例如，带有“jsonp”或“script”数据类型的跨域请求 和“GET”类型）。在中使用的脚本标记上设置charset 属性 请求。当本地页面上的字符集不是 与远程脚本上的相同。

要让 jQuery 将 UTF-8 charset 属性添加到 JSONP script 标记，您所要做的就是将 scriptCharset: 'UTF-8' 添加到 AJAX 设置对象。

示例代码：

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