如何在 NodeJS 14 中允许 CORS

Posted 2023-03-04

【中文标题】如何在 NodeJS 14 中允许 CORS

【英文标题】：How to allow CORS in NodeJS 14

【发布时间】：2021-09-03 20:43:02

【问题描述】：

我是 javascript 和 Node 的新手，我正在尝试使用 NodeJS 制作一个新的基于 Rest 的 API。 但是当我尝试使用 API CORS 获取数据时，会抛出问题。

来自浏览器控制台的错误：

Access to fetch at 'http://localhost:8080/feed/posts' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Feed.js:53 GET http://localhost:8080/feed/posts net::ERR_FAILED
Feed._this.loadPosts @ Feed.js:53
componentDidMount @ Feed.js:37
commitLifeCycles @ react-dom.development.js:19690
commitLayoutEffects @ react-dom.development.js:22662
callCallback @ react-dom.development.js:189
invokeGuardedCallbackDev @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:291
commitRootImpl @ react-dom.development.js:22404
unstable_runWithPriority @ scheduler.development.js:659
runWithPriority$1 @ react-dom.development.js:11077
commitRoot @ react-dom.development.js:22246
finishSyncRender @ react-dom.development.js:21663
performSyncWorkOnRoot @ react-dom.development.js:21649
scheduleUpdateOnFiber @ react-dom.development.js:21045
updateContainer @ react-dom.development.js:24194
(anonymous) @ react-dom.development.js:24577
unbatchedUpdates @ react-dom.development.js:21763
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24576
render @ react-dom.development.js:24659
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ validators.js:14
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

这里是已经配置好的 CORS 相关设置。

const express = require('express');


const bodyParser = require('body-parser');

const feedRoutes = require('./routes/feed');

const app = express();

app.use(bodyParser.json());

app.use('/feed', feedRoutes);


app.use((req, res, next) => 
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    next();
);

app.listen(8080);

NPM 和 NodeJs 版本

(base) ➜  RestUsingNodeJs npm --version
7.18.1
(base) ➜  RestUsingNodeJs node --version
v14.17.0

请在这里提出需要做什么。

【问题讨论】：

请通过这个包，这应该可以帮助你Package link

谢谢 Nirjal 但我已经尝试过了，但问题仍然存在。还有什么可以做的吗？

【参考方案1】：

您需要在您的请求到达路由器之前设置 CORS。如果您需要，这将允许在网络上的任何地方访问所有路由。 this 资源可能会对您有所帮助

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

const feedRoutes = require('./routes/feed');

const app = express();

app.use((req, res, next) => 
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    next();
);

app.use(bodyParser.json());

app.use('/feed', feedRoutes);

app.listen(8080);