Postman调用接口正常但React中用axios请求报CORS错误如何解决

问题原因 #

浏览器同源策略会拦截跨域请求的响应，要求服务端返回指定CORS响应头才允许前端读取返回内容。Postman属于客户端工具，不受同源策略限制，因此测试正常不代表浏览器端可以正常发起请求。

额外说明：你目前的axios请求头配置写法存在错误，请求头需要放在headers配置项内，虽然这个问题不会导致CORS错误，但可能导致请求不符合后端要求，修正后的写法如下：

const handleSubmit = (e) => {
    e.preventDefault();
   axios.get("https://etsea.herokuapp.com/category/", {
      headers: {
        "Content-Type": "application/json"
      }
    })
    .then(res => {
      console.log(res.data);
    })
    .catch(err => {
      console.log(err)
    })
}

另外你提到的路径末尾斜杠问题与CORS错误无关，按后端接口要求保留斜杠即可，不需要调整。

解决方法 #

方案1：后端配置CORS（推荐，生产/开发环境均适用） #

根据你使用的Python后端框架选择对应配置即可：

• Django框架
  1. 安装依赖：pip install django-cors-headers
  2. 在settings.py的INSTALLED_APPS中添加corsheaders
  3. 在settings.py的MIDDLEWARE列表最顶部添加corsheaders.middleware.CorsMiddleware，注意位置必须早于django.middleware.common.CommonMiddleware
  4. 配置允许的源：开发阶段可临时设置CORS_ALLOW_ALL_ORIGINS = True，生产环境建议替换为CORS_ALLOWED_ORIGINS = ["你的React前端部署域名"]限制来源
• Flask框架
  1. 安装依赖：pip install flask-cors
  2. 项目入口初始化时启用CORS：

  from flask import Flask
  from flask_cors import CORS
  
  app = Flask(__name__)
  # 开发阶段可全局允许跨域，生产可传入origins参数指定允许的前端地址
  CORS(app, origins="*")
  

• FastAPI框架
  1. 直接使用内置的CORSMiddleware配置即可：

  from fastapi import FastAPI
  from fastapi.middleware.cors import CORSMiddleware
  
  app = FastAPI()
  app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"], # 开发阶段设为*，生产替换为你的前端域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
  )
  

方案2：前端本地开发临时代理（仅本地开发可用，生产环境无效） #

如果暂时无法修改后端配置，本地开发阶段可以通过代理绕过跨域限制：

• 若使用create-react-app创建项目
  1. 在项目根目录的package.json中添加字段："proxy": "https://etsea.herokuapp.com"
  2. 将axios请求的地址改为相对路径：axios.get("/category/", {...})
• 若使用Vite创建项目
  1. 在vite.config.js中添加代理配置：

  import { defineConfig } from 'vite'
  
  export default defineConfig({
    server: {
      proxy: {
        '/category': {
          target: 'https://etsea.herokuapp.com',
          changeOrigin: true
        }
      }
    }
  })
  

  2. 直接请求相对路径即可：axios.get("/category/", {...})

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