javascript - Google Chrome 扩展程序中的 JSONP 通信

Question

我正在编写一个 Google Chrome 扩展程序。我想使用jsonp与jQuery进行跨域通信。这是ajax代码:

$.ajax({
    type : 'POST',
    url : $(this).attr('action'),
    data : $(this).serialize(),
    contentType: 'application/json; charset=utf-8',
    dataType : 'jsonp',
    success : function() {
        alert('A');
    }
});

这会调用此 URL:

http://sgsync.dev.kreatura.hu/api/signup/?callback=jQuery1710883696963544935_1327347078860&nick=&pass=&_=1327347087371

服务器使用以下数据回答 200 OK:

jQuery1710883696963544935_1327347078860({"messages":["Minden mez\u0151 kit\u00f6lt\u00e9se k\u00f6telez\u0151!"],"errorCount":1})

之后，我收到此错误消息:

Can't find variable: jQuery1710883696963544935_1327347078860

我尝试了所有方法，但无法理解问题所在。请帮助我!

请注意，我编写了服务器端代码，因此也可能存在问题。

提前致谢!

Answer 1

这如此令人困惑的部分原因是 jQuery API 混淆了 Ajax 调用与 JSONP 调用的问题。当将 $.ajax 与 dataType: 'jsonp' 一起使用时，不会执行 Ajax 调用(不使用 XHR 通信)，而是使用带有回调的动态脚本注入(inject)。这意味着 type: 'POST' 将没有任何意义(因为动态脚本注入(inject)只能像 GET 那样工作)，并且所有 data 将被编码为请求的 URL，而不是作为帖子正文发送。如果这确实是为了“POST”数据，则不应使用 JSONP(因为敏感数据将以明文形式发送)。

正如其中一条评论中提到的，此问题已在本答案中得到解决，涉及来自 Chrome 内容脚本的 JSONP 请求以及从内容脚本使用 XHR。

JSONP request in chrome extension, callback function doesn't exist?

对于 Chrome 扩展程序，在 Chrome 扩展程序中使用“内容脚本”时，它们会强制您进入沙箱。您可以从 Chrome 扩展程序内容脚本中的请求中删除 dataType: 'jsonp'，此调用应该可以正常工作。如果这不起作用，您可以尝试直接使用 XHRHttpRequest 进行调用:

var xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.open("POST", $(this).attr('action'), true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
       alert("A");
  }
}
xhr.send($(this).serialize());

对于其他浏览器，我不确定他们的每个特定插件环境如何处理跨域 XHR 调用(或者他们是否首先允许这样做)。这是普通浏览器不允许的(除非使用类似 easyXDM 的东西)。