无法从 Chrome 扩展程序连接到 localhost答案

【问题标题】：Can't connect to localhost from Chrome extension无法从 Chrome 扩展程序连接到 localhost
【发布时间】：2011-10-05 22:29:22
【问题描述】：

我正在开发一个跟踪时间的 Chrome 扩展程序，并使用 Google App Engine 作为后端。

为了进行测试，我正在尝试将本地版本的扩展程序连接到本地版本的 App Engine 应用。当我尝试发送 POST 请求时，我得到：

XMLHttpRequest cannot load @987654321@. Origin chrome-extension://mbndmimplohfkkcincjodnfpaapbbmei is not allowed by Access-Control-Allow-Origin.

但是当我更改 URL 以便它发布到 appspot.com URL 时它可以工作。

什么是 Access-Control-Allow-Origin，为什么它阻止我从 localhost 获取结果？

【问题讨论】：

标签： google-app-engine google-chrome-extension localhost

【解决方案1】：

我相信这是因为您无法调用未包含在清单的权限部分中的服务器。 manifest.json 的权限部分应如下所示：

"permissions": [
    "http://myapp.appspot.com/*",
    "http://localhost/*"
]

注意，我没有对此进行测试，但听起来这就是您的问题所在。

【讨论】：

小修正。即使不在权限范围内，您也可以发出请求，但除非 CORS 配置为在服务器上允许这样做，否则它将失败。
我已经配置了 localhost 的权限，但是还是不行。有人可以帮忙吗？
@DmitryMinkovsky 您是否必须对 CORS 进行配置或执行任何操作？将 localhost 添加到权限是否足够？

【解决方案2】：

您可以使用自定义端口。

manifest.json

"permissions": ["http://localhost/*"]

background.js（使用 jQuery）

$.post('http://localhost:5000/some-endpoint');

【讨论】：

【解决方案3】：

您不能在权限范围内添加端口。您必须将端口 80 用于权限清单中的扩展。我通常运行 nginx 并将所有流量从我的扩展程序路由到端口 80。

【讨论】：

这是我的第一个扩展，所以我真的不知道我在做什么。我该怎么做？
接受的答案是正确的。我在权限中添加了"http://localhost/*"，现在我可以对 :8080 执行 Ajax GET。
谢谢@rane，很高兴知道。

【解决方案4】：

我能够让这段代码工作：

var loginPayload = {};
loginPayload.username = document.getElementById('username').value;
loginPayload.password = document.getElementById('password').value;
console.log(loginPayload);

var callback = function (response) {
    console.log(response);
};
var handle_error = function (obj, error_text_status){
    console.log(error_text_status + " " + obj);
};

$.ajax({
    url: 'https://127.0.0.1:8443/hello',
    type: 'POST',
    success: callback,
    data: JSON.stringify(loginPayload),
    contentType: 'application/json',
    error: handle_error
});

编辑：
显然有人不喜欢这个，所以要记住几点：

对于必须在 https 上运行的扩展程序，请确保您的服务器提供 https。
与上面的帖子相反，chrome 扩展可以在端口 80 / 443 以外的端口上提供服务

【讨论】：

【解决方案5】：

如果你想要一个通用的本地主机方法

*://localhost:*/*

【讨论】：