Fetch http://localhost:3001/ from Chrome Extension with Reac

Question

我看到了一些类似的问题和解决方案，人们希望使用http://localhost:3001/some_url并使用cors来实现这一点。

但我的问题有点不同。我的网络应用程序不是一个网站，而是一个网络扩展。

到目前为止，我找不到从http://localhost:3001/url即使使用紧身胸衣。

我尝试过的是：

服务器：

const cors = require("cors");
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use(
cors({
origin: "http://localhost:3001/url" // restrict calls to those this address

})
);

在background.js文件中：

create(urls){
console.log(urls);
return new Promise((resolve, reject) =>{
fetch('https://cors-anywhere.herokuapp.com/'+'http://localhost:3001/url', {
method: 'POST',
body: JSON.stringify(urls),
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
"Access-Control-Allow-Origin: *"
}
})
.then(result => result.json())
.then(json => resolve(json))
.catch(err => {
console.log(err);
reject(err);
});
});
}

我还在packages.json中添加了"proxy": "http://localhost:3001/url"。

我仍然得到错误：

Access to fetch at 'http://localhost:3001/url' from origin 'chrome-extension://extension_id' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3001/url' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

有什么办法解决这个问题吗？

Answer 1

看起来您正在向原点添加路径/url，但原点是：

Web内容的来源由方案(协议(、主机定义(域(，以及用于访问它的URL的端口

尝试使用http://localhost:3001作为原始值。