使用 React 从 Chrome 扩展中获取 http://localhost:3001/

Question

我看到了一些类似的问题和解决方案，人们想点击http://localhost:3001/some_url 并使用cors 这样做。

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

到目前为止，即使使用 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，但 origin 是：

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

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