React调用登录接口报Failed to fetch与CORS跨域错误如何解决

AI 小北

2026-9-27

问题原因

这是浏览器同源策略限制导致的CORS跨域错误：你的前端运行在http://localhost:3000，后端接口部署在http://127.0.0.1:8000，二者端口、域名标识不匹配，浏览器会拦截跨域请求的响应。Postman属于独立客户端工具，不受同源策略限制，所以可以正常调用接口。

前置代码修正

你的fetch请求缺少JSON格式标识头，先修改请求配置避免后端无法识别参数：

login(){
    console.log(this.state);
    fetch('http://127.0.0.1:8000/api/login',{
        method:'POST',
        // 新增请求头标识提交的是JSON格式数据
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.state)
    }).then((res)=>res.json())
    .then((result)=>{console.log(result)})
    // 新增错误捕获方便排查问题
    .catch(err=>console.error('请求异常：',err))
}

解决方案

方案1：后端配置CORS（最推荐，全环境适用）

直接在后端服务的响应头添加跨域许可规则，允许你的前端地址访问，不同后端框架都有成熟的配置方案：

Node.js Express 后端：安装cors中间件后配置

const cors = require('cors')
// 允许http://localhost:3000的跨域请求
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true // 后续需要传递认证头、cookie时开启
}))

Django 后端：安装django-cors-headers后在settings中配置

INSTALLED_APPS = [
    # ...其他配置
    'corsheaders',
]
MIDDLEWARE = [
    # 放在CommonMiddleware之前
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ...其他配置
]
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

其他后端框架直接搜索「框架名 + CORS配置」即可找到对应方法。

方案2：React开发代理（仅本地开发适用，无需改后端）

如果你用create-react-app初始化的项目，直接在项目根目录的package.json中新增一行配置：

"proxy": "http://127.0.0.1:8000"

修改fetch请求为相对路径，去掉域名前缀：

fetch('/api/login',{/* 原有配置 */})

本地开发时React的内置服务器会自动把所有接口请求转发到后端服务，不会出现跨域问题。该方案仅适用于本地开发，生产部署时仍需处理跨域，或者将前后端部署在同域名下。

不推荐方案：设置mode: 'no-cors'

报错提示的该方案仅能让请求成功发送，你无法拿到后端返回的响应内容，对登录需要获取JWT token的场景完全不适用，不要使用。

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