node.js - 即使安装了 cors nom 软件包，也会出现 CORS 错误

Question

我正在使用React Filepond并且上传部分工作正常。但是，当我转到现有记录并尝试显示图像时，出现 CORS 错误：

从源“ http://localhost:3000 ”访问“ http://localhost:8000/img/myImg.jpg ”的 XMLHttpRequest已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头在请求的资源上。

在我的节点服务器上的 app.js 中，我有以下内容，但使用cors 包仍然出现 cors 错误

const cors = require("cors");
app.use(cors());
app.options("*", cors());

在 React 中，我有以下内容：

  state = {
    data: {
      title: "",
      bgImg: ""
    },
    errors: {},
    files: [
      {
        source: "myImg.jpg",

        options: {
          type: "local"
        }
      }
    ]
  };

    <FilePond
      ref={ref => (this.pond = ref)}
      files={this.state.files}
      allowMultiple={false}
      maxFiles={1}
      name="bgImg"
      server={{
        process: "http://localhost:8000/api/uploads/",
        load: "http://localhost:8000/img/"
      }}
      oninit={() => this.handleInit()}
      onupdatefiles={fileItems => {
        this.setState({
          files: fileItems.map(fileItem => fileItem.file)
        });
      }}
    />

在 package.json 我还添加了一个代理：

"proxy": "http://localhost:8000/img",

网络选项卡 -> 标题选项卡显示

Request URL: http://localhost:8000/img/myImg.jpg
Referrer Policy: no-referrer-when-downgrade

Provisional headers are shown
Referer: http://localhost:3000/home-banner

Answer 1

尝试在浏览器中安装 cors 插件并访问 api。希望这可以帮助..

const cors = require('cors')

const corsOptions = {
  origin: 'http://localhost:8000'
}

app.get('/img', cors(corsOptions), (req, res, next) => {
  //...
})