如何解决节点.JS passport oauth2 cors错误

Question

我正在尝试配置节点passport oauth2登录。

如果直接从浏览器调用get url，则所有操作都可以完美进行。

我正在尝试使用react客户端作为前端来设置登录。

react axios api调用

const res = await Axios.get(http://locahost:5000/login`)

node.js express

app.use(cors({
'allowedHeaders': ['sessionId', 'Content-Type', 'authorization'],
'exposedHeaders': ['sessionId','authorization'],
// 'origin': true,
// 'Access-Control-Allow-Origin': 'http://localhost:8080',
'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE, OPTIONS',
'preflightContinue': false
}));
app.use(bodyParser.json({ limit: "50mb", extended: true }));
app.get('/npt/login', passport.authenticate('oauth2'));

这是我得到的错误

Access to XMLHttpRequest at 'https://...' (redirected from 'http://localhost:5000/npt/login') from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我需要在客户端应用程序中设置标题吗？

更新：我正在尝试使用Azure应用程序注册使用此配置。

我已经更新了快速CORS设置。

更新2:我已经设法解决了在与nodeJS express服务器相同的源上运行前端的问题。以下是我所遵循的示例：https://github.com/cicorias/react-azuread-passport

Answer 1

如果您通过CRA运行react端

您可以在package.json文件中添加代理

像这样：

"proxy": "http://yourTarget.com",

并从调用http请求

http://localhost:3000

注意：当您更改package.json文件时，必须重置npm start命令才能看到更改的