React JS - 即使在需要 cors 之后也会出现 CORS 错误答案

【问题标题】：React JS - Getting a CORS error even after require the corsReact JS - 即使在需要 cors 之后也会出现 CORS 错误
【发布时间】：2022-01-05 18:42:16
【问题描述】：

我正在使用 Express 和 ReactJS

快递代码：


const Express = require('express');
const PORT = 5000;
const cors = require('cors');

const server = Express();
server.use(cors());   // I've added the cors

server.get('/users', (req, res) => {
    res.send({"users": [ {"user1": "John"}, {"user2": "Nick"} ]);
})


server.listen(PORT, () => {
console.log("server is running on 5000")
});

反应代码：

import { useState,useEffect } from 'react';


const Home = () => {

  async function fetchData() {
      try{
        const output = await fetch(`http://localhost:5000/users`);
        console.log(output);
      } catch(e){
          console.error(e);
      }
     
  }

  useEffect(() => {
        fetchData();
     }, [])
  }

    return (
        <h1>FetchData</h1>
    )

 export default Home;

完成这些操作后...我的控制台中仍然出现 CORS 错误。

这是完整的错误消息：

Response { type: "cors", url: "http://localhost:5000/users, redirected: false, status: 500, ok: false, statusText: "Internal Server Error", headers: Headers, body: ReadableStream, bodyUsed: false }

经过一番研究，我发现在 package.json 文件中添加"proxy": "http://localhost:5000" 可以解决问题。但是什么都没有发生。

我现在该怎么办？

谢谢:)

【问题讨论】：

那个 500 状态码是可疑的。当您使用curl 访问您的/users 端点时，您是否也得到了它？
我正在使用 Postman & insomnia 测试
您在浏览器中收到什么 CORS 错误消息（如果有）？

标签： node.js reactjs error-handling next.js cors

【解决方案1】：

尝试使用 axios 而不是 fetch：

// npm install axios

import { useState,useEffect } from 'react';
import axios from 'axios'


const Home = () => {

  async function fetchData() {
      try{
        const output = await axios(`http://localhost:5000/users`);
        console.log(output);
      } catch(e){
          console.error(e);
      }
     
  }

  useEffect(() => {
        fetchData();
     }, [])
  }

    return (
        <h1>FetchData</h1>
    )

 export default Home;

【讨论】：

【解决方案2】：

尝试使用核心选项，

const corsOptions = {
  origin: ['http://localhost:<port_of_reactapp>'],
  methods: ['GET', 'POST', 'DELETE', 'UPDATE', 'PUT', 'PATCH'],
};
server.use(cors(corsOptions));

https://expressjs.com/en/resources/middleware/cors.html

【讨论】：

【解决方案3】：

如果您已经 npm install cors，在您的 const 服务器中，将 const 服务器从 const server = Express(); 更改为 const server = express();。

https://expressjs.com/en/resources/middleware/cors.html

或者尝试使用 node-http-proxy 然后只从本地主机请求：

http.createServer(function(req, res) {proxy.web(req, res, { target: 'http://localhost:5000/users' });});

安装：https://github.com/http-party/node-http-proxy

【讨论】：