React通过axios请求Node本地接口触发CORS跨域错误如何解决

数据老陈

2026-8-29

问题根因

这个报错是浏览器同源策略触发的CORS拦截：你的前端运行在http://localhost:3000，后端运行在http://localhost:3333，两者端口不一致属于跨源请求，后端没有返回合法的跨域允许响应头，导致浏览器拦截了请求响应。

解决方案

后端配置（核心修复）

所有跨域配置必须写在路由注册之前才会生效，根据你用的Node框架选对应配置即可。

如果你用Express框架，推荐直接用cors中间件：

后端项目目录下执行安装命令：
npm install cors
在服务入口文件（通常是index.js/app.js）中加入配置：

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

// 全局开启跨域支持，开发环境直接用即可
app.use(cors())
// 别忘了加JSON请求体解析中间件，否则POST传的参数后端无法读取
app.use(express.json())

// 之后再注册你的/person相关业务路由

如果你不想引入第三方依赖，可以手写简易跨域中间件：

app.use((req, res, next) => {
  // 放行本地3000端口的前端请求
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
  // 允许用到的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS')
  // 允许携带Content-Type等常用请求头
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
  // 浏览器发的预检OPTIONS请求直接返回200通过
  if (req.method === 'OPTIONS') return res.sendStatus(200)
  next()
})

前端代码修正

你当前写的axios请求没有处理Promise返回，会拿不到正确的响应结果，改成async/await写法即可：

const AddPerson = async () => {
  try {
    const { data } = await axios.post('http://localhost:3333/person/', {
      name: name,
      age: age,
      profession: profession
    })
    console.log('新增人员成功', data)
  } catch (err) {
    console.error('请求失败', err)
  }
}