Question

我尝试在我的Chrome应用程序中从我的沙盒页面进行ajax调用，但是我收到此错误：

XMLHttpRequest无法加载https://myserver.com/test。该＆＃39;访问控制允许来源＆＃39; header有一个值＆＃39; https://myserver.com＆＃39;那不是等于提供的原产地。起源＆＃39; null＆＃39;因此是不允许的访问。

似乎不允许跨域，但在沙盒应用中它应该是.. 错误在哪里？

Manifest.json：

{
    "name": "app",
    "description": "app",
    "version": "0.1",
    "manifest_version": 2,
    "permissions": [
        "http://*/*",
        "https://*/*",
        "unlimitedStorage",
        "contextMenus",
        "cookies",
        "tabs",
        "notifications",
        "storage"
    ],
    "sandbox": {
        "pages": [
            "index.html"
        ]
    },
    "app": {
        "background": {
            "scripts": [
                "src/background.js"
            ]
        }
    },
    "icons": {
        "16": "img/favicon.png",
        "128": "img/favicon.png"
    }
}

container.html：

<!DOCTYPE html>
 <html>
 <body>
    <iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation" src="index.html" id="MdwSandBox1" width="800px" height="800px"></iframe>
 </body>
 </html>

background.js：

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('container.html', {
    'bounds': {
      'width': 800,
      'height': 800
    }
  });
});

Answer 1

根据docs：

沙盒页面不受内容安全策略（CSP）的约束由应用程序或扩展程序的其余部分使用（它有自己独立的CSP 值）。这意味着，例如，它可以使用内联脚本和 EVAL。

然而：

如果未指定，则默认 content_security_policy 值为沙箱 allow-scripts allow-forms 。您可以指定要限制的CSP值沙箱甚至更进一步，但必须有沙盒指令和可能没有allow-same-origin令牌（请参阅HTML5规范对于可能的沙箱令牌）。

因此，您无法进行此API调用。

但是，您可以从应用程序进行API调用，并使用postMessage将结果传递给iframe。第二种方法是将required headers添加到您的后端 - 如果您可以控制它。

使用沙盒从Chrome应用程序发出ajax请求

1 个答案: