Jquery AJAX在扩展页内的iframe内调用

我有一个chrome扩展，它在扩展页面的iframe中显示来自web服务的UI。我正在使用以下方法将一些内容脚本注入远程UI：

"content_scripts": [
  {
    "matches" : [ "https://mywebservice.com/frontend/*" ] ,
    "js" : [ "frontend-page-contentscript.js" ],
    "all_frames" : true
  }
]

这是允许的，因为（也在manifest.json中）：[编辑：事实证明，在iframe中运行内容脚本并不需要这样做-但是删除它并不能使AJAX按我预期的方式工作]

"sandbox" : {
  "pages" : [
    "cocoon_page_proxy.html"
  ]
}

但是，当我进行一个简单的ajax调用时（不是从内容脚本，而是从iframe）：

我没有得到任何响应，它会暂停，状态为“0”。根据我的经验，这通常是由于跨源权限问题造成的，但不应该是这样——它是从主页所在的同一服务器请求另一个资源

---

建议？

假设我理解正确，并且您正在将

chrome扩展名：//

URL加载到框架中，并尝试从那里XHR远程页面的内容，您需要为该域添加内容。

叹气-这是源于我扩展名中其他地方的错误，在webrequest重定向代码中。

这样您就可以在Chrome中使用WebRequestAPI强制实现跨域ajax。您只需添加http头

访问控制允许来源

onHeadersReceived

chrome.webRequest.onHeadersReceived.addListener(function onHeadersReceived(resp) {
  resp.responseHeaders.forEach(function forEachHeader(header, index) {
    if(header.name.toLowerCase() === "access-control-allow-origin") {
      resp.responseHeaders[index].value = "*";
    }
  });
  resp.responseHeaders[resp.responseHeaders.length] = {
    "name":"Access-Control-Allow-Origin",
    "value":"*"
  };
  return {responseHeaders: resp.responseHeaders};
}, {
  urls: [
  //chrome-extension://jkafskjifsf/cocoon_page_proxy.html
    chrome.extension.getURL('') + 'cocoon_page_proxy.html',
   '*://your.api.endpoint.domain.com/*'
  ] ,
  types: [
    'sub_frame'
  ]
}, ['blocking', 'responseHeaders']);

尝试将其添加到您的背景页面。如果没有后台页面，请将其添加到manifest.json并创建相关文件：

"background": {
  "scripts": [ "background.js" ]
}

您还需要将这些项目添加到manifest.json文件中现有的

权限列表中：

//"permissions": [
    "chrome-extension://<put_your_extension_id_here>/cocoon_page_proxy.html",
    "*://your.api.endpoint.domain.com/*",
    "webRequest",
    "webRequestBlocking"
//],

/“权限”：[
“铬-extension:///cocoon_page_proxy.html",
“*：//your.api.endpoint.domain.com/*”，
“网络请求”，
“webRequestBlocking”
//],

对于URL，如
*：//your.api.endpoint.domain.com/*
，请添加进行ajax请求所需的任何URL

请评论这是如何工作的，如果您遇到任何问题。
您是否尝试过对同一域进行ajax调用？您甚至可以向chrome.extension.getURL（'frontend-page-contentscript.js'）发送一个ajax调用

并且它应该返回该文件的内容。chrome.extension.getURL生成一个类似

chrome的url-extension://oidssafjkkljreiousfdljk/frontend-page-contentscript.js

其中，随机字符串是扩展ID。因此，您有

chrome扩展：//

页面，该页面带有一个iframe，可直接引用其内部的远程页面

src

属性？我得到的印象是，

cocoon\u page\u proxy.html

是一个本地页面，但从您的描述中并不清楚。你为什么要把那页放在沙箱里？你说“什么是允许的…”但你不说什么是允许的？要在页面上运行内容脚本，您当然不需要它。@DevinGRhode-Ajax在顶级页面的上下文中工作到您期望的位置。在iframe内部，对

chrome扩展名

URI的请求不起作用，对从中检索iframe内容的主机的请求也不起作用。@MatthewGertner-您的解释是正确的。此外，我还将“沙盒”功能与一个行为的修复混淆，该行为引发了我先前的一个问题（）。我想我必须“沙箱”页面，以便允许我在那个问题上提出的问题。事实证明，您没有，在移除沙箱后，AJAX跨源阻塞仍然存在。这很重要，通常可能是此类问题的原因。如果答案有用，您应该将其标记为正确，我再次引用并使用了它。

//"permissions": [
    "chrome-extension://<put_your_extension_id_here>/cocoon_page_proxy.html",
    "*://your.api.endpoint.domain.com/*",
    "webRequest",
    "webRequestBlocking"
//],