提取请求返回“无访问控制”标题错误，但是我的CORS设置了适当的设置吗？

Question

我知道这已经被问到无数时期，但我发现的解决方案都没有对我有用。

我有一个带有express的节点API连接到mongoDB数据库。

我正在尝试将数据返回到前端的反应，但是每当我向API内OPINT请求时，我都会收到以下错误：

Access to fetch at 'http://redacted.com' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我尝试了从以前的问题中找到的几种解决方案，但似乎没有解决方案为我工作。

我尝试了以下解决方案：

app.use(cors({origin: 'http://localhost:3000', methods: 'GET, POST', preflightContinue: false'}));

app.use(cors({origin: '*'}));

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin': 'http::/localhost:3000');
    res.setHeader('Access-Control-Allow-Methods': 'GET, POST');
    next();

app.options('*', cors());

似乎没有任何作用，并且继续抛出了这种交叉误差。

这是我对我的API的完整index.js：

let express = require('express');
let bodyParser = require('body-parser');
let mongoose = require('mongoose');
const cors = require('cors');

let apiRoutes = require('./api-routes/routes');

let app = express();
var port = process.env.PORT || 3001

app.use('/api', apiRoutes)
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());
app.use(cors({
    origin: 'http://localhost:3000'
}))

mongoose.connect('mongodb://localhost:27017', { useNewUrlParser: true });
var db = mongoose.connection;

app.get('/', (req, res) => res.send('API is working!'));

app.listen(port, function() {
    console.log("Running server on port 3001");
});

react中的提取请求：

const response = await fetch('http://localhost:3001/api/pcg/bgproutestate');
    const data = await response.json();
    console.log(data);

有人可以告诉我是否有什么问题和如何解决这个问题？我从来没有以前的API遇到这个问题...谢谢

Answer 1

好的，一旦我发布了一个问题，我就找到了一个解决方案...

如果我移动以下代码..：

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin': 'http::/localhost:3000');
    res.setHeader('Access-Control-Allow-Methods': 'GET, POST');
    next();

.. above此代码..：

app.use('/api', apiRoutes)

..它采用CORS策略并允许获取数据。我认为在定义API的路线之前，需要定义CORS。希望这对别人有帮助！