React/Redux 前端和 Node.js 后端之间的 CORS 问题 [重复]

Posted 2023-02-27

【中文标题】React/Redux 前端和 Node.js 后端之间的 CORS 问题 [重复]

【英文标题】：CORS issue between React/Redux frontend and Node.js backend [duplicate]

【发布时间】：2020-08-04 11:20:29

【问题描述】：

React 应用程序位于端口 3000，而我的服务器位于端口 4000。 从我的 Redux 操作中，我正在调用这条路线

 axios.get("localhost:4000/auth/user", config) 
      .then(res => dispatch(
          type: USER_LOADED,
          payload: res.data
      ))

并得到这个错误：

在 'localhost:4000/auth/user' 从源访问 XMLHttpRequest 'http://localhost:3000' 已被 CORS 策略阻止：跨源 请求仅支持协议方案：http、data、chrome、 chrome 扩展，https。

即使我已经将这些 CORS 设置添加到服务器：

app.use(function (req, res, next) 
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With')

  next()
)

我错过了什么？

【参考方案1】：

按照标准

您需要在 Node.js 代码的服务器端添加 CORS：

npm - CORS

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

阅读更多：https://www.npmjs.com/package/cors

【参考方案2】：

看看cors-anywhere。它是一个服务器代理，可以将 CORS 标头添加到您的请求中（我建议不要在生产中这样做，因为它会减慢响应时间）。

解决这个问题的最佳方法是像这样创建自己的代理

const express = require('express');
const request = require('request');

const app = express();

app.use((req, res, next) => 
  res.header('Access-Control-Allow-Origin', '*');
  next();
);

app.get('/route', (req, res) => 
  request(
     url: 'https://www.example.com' ,
    (error, response, body) => 
      if (error || response.statusCode !== 200) 
        return res.status(500).json( type: 'error', message: err.message );
      

      res.json(JSON.parse(body));
    
  )
);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`listening on $PORT`));

【讨论】：

谢谢你。问题有所不同，但仍然提供有用的信息。

【参考方案3】：

localhost:4000/auth/user 不是有效的 URL。浏览器将localhost: 解释为方案，因此有关方案的错误消息：

仅协议方案支持跨源请求：http、data、chrome、chrome-extension、https。

您应该使用http://localhost:4000/auth/user 作为您的网址。

【讨论】：

谢谢你。错过了