React对接Express时fetch请求报错Unhandled Rejection (TypeError): Failed to fetch

• 先确认Express服务运行状态：直接在浏览器地址栏输入http://localhost:3000/posts，如果可以正常返回你给出的JSON数据，说明服务端接口本身正常，问题基本可以确定是跨域限制导致；如果不能返回，先检查Express服务是否正常启动、监听端口是否为3000、/posts路由配置是否正确。
• 确认React开发服务的运行端口：如果React和Express都使用了3000端口，会出现端口冲突，导致请求失败，建议将两个服务的端口改为不同值，比如Express用3000，React用3001。
• 打开浏览器控制台的Network面板，查看该fetch请求的详情，如果出现CORS相关报错，说明是浏览器同源策略拦截了跨域请求。

方案1：Express端配置CORS（推荐，适配开发+生产环境） #

这是最通用的解决方法，步骤如下：

1. 进入Express项目目录，安装cors依赖：
   npm install cors
2. 在Express入口文件（通常是app.js/index.js）中引入并启用cors：

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

// 开发环境可以直接允许所有跨域请求
app.use(cors())

// 生产环境建议只放行指定域名，比如你的React服务地址是http://localhost:3001，就写：
// app.use(cors({
//   origin: 'http://localhost:3001'
// }))

// 原有接口逻辑保持不变
app.get('/posts', (req, res) => {
  // 你的返回数据逻辑
})

app.listen(3000, () => console.log('Express服务运行在3000端口'))

如果不想安装第三方依赖，也可以手动设置跨域响应头：

app.all('*', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With')
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
  next()
})

方案2：React开发环境配置代理（仅适配本地开发） #

如果你使用create-react-app搭建的React项目，可以直接配置代理绕开开发环境的跨域限制：

1. 打开React项目的package.json文件，添加一行配置：
   "proxy": "http://localhost:3000"
2. 修改React端的fetch请求，改为相对路径即可，建议同时添加错误捕获避免未处理的rejection报错：

useEffect(() => {
  fetch("/posts") // 不需要写完整的域名端口
    .then((response) => response.json())
    .then((users) => {
      setUsers(users);
    })
    .catch(err => console.error('请求异常：', err))
}, []);

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