React调用Express接口已引入cors仍报CORS错误该如何解决？

1. 修复React代码语法与请求规则错误 #

你的Home组件存在括号不匹配问题，组件提前闭合导致return语句脱离组件作用域，会直接触发运行异常。同时配置proxy后不能写完整服务端地址，否则代理规则不生效，修复后代码如下：

import { useState,useEffect } from 'react';

const Home = () => {
  async function fetchData() {
      try{
        // 配置proxy后直接写接口路径即可
        const output = await fetch(`/users`);
        // 需要将原始Response对象转为json格式才能拿到返回数据
        const resData = await output.json();
        console.log(resData);
      } catch(e){
          console.error(e);
      }
  }

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

  return (
    <h1>FetchData</h1>
  )
}

export default Home;

2. 修复Express服务端潜在问题 #

首先确认你已经在服务端项目中安装了cors依赖，未安装的话先执行npm install cors，否则服务端启动时就会抛出异常，触发500错误。
修改服务端代码如下：

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

const server = Express();
// 明确指定允许的前端地址，避免cors规则异常
server.use(cors({
  origin: "http://localhost:3000"
}));

server.get('/users', (req, res) => {
    // 使用res.json替代res.send，自动添加正确的json响应头
    res.json({"users": [ {"user1": "John"}, {"user2": "Nick"} ]});
})

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

3. 重启两端服务验证 #

修改完成后先关闭当前运行的Express和React开发服务，先启动Express服务，确认控制台无报错后再启动React服务。
可直接在浏览器地址栏输入http://localhost:5000/users验证接口是否正常返回数据，若能正常显示json内容则说明服务端无问题。

内容的提问来源于stack exchange，提问作者Vishal Sharma