CORS错误，即使安装了cors nom包

Question

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

访问位于“”的XMLHttpRequesthttp://localhost:8000/img/myImg.jpg“起源”http://localhost:3000'已被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) => {
  //...
})