如何解决React与Django项目中的CORS跨域错误

核心问题分析 #

你的CORS配置里缺少React应用运行的端口号。React默认在3000端口启动，浏览器判断跨域时会严格匹配「域名+端口」，仅填写http://localhost或http://127.0.0.1会导致源不匹配，触发CORS错误。

具体解决步骤 #

• 修正Django的CORS_ALLOWED_ORIGINS配置
  在settings.py中添加带端口的React源：

  CORS_ALLOWED_ORIGINS = [
      'http://localhost:3000',
      'http://127.0.0.1:3000',
      # 保留原有需要的其他源配置
  ]
  CORS_ALLOW_CREDENTIALS = True
  

  如果你的React使用了非默认端口（如3001），替换为对应端口即可。

• 确保django-cors-headers中间件配置正确
  确认settings.py的MIDDLEWARE中包含以下两项（顺序不能错，需放在CommonMiddleware之前）：

  MIDDLEWARE = [
      # ... 其他中间项
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      # ... 其他中间项
  ]
  

  同时INSTALLED_APPS要添加依赖：

  INSTALLED_APPS = [
      # ... 其他应用
      'corsheaders',
  ]
  

• 配置Axios携带Credentials
  因为你开启了CORS_ALLOW_CREDENTIALS = True，前端Axios需要同步启用withCredentials，修改实例配置：

  const client = axios.create({
      baseURL: "http://127.0.0.1:8000",
      withCredentials: true
  });
  

• 重启Django服务
  修改配置后必须重启Django开发服务器，新配置才能生效。

内容的提问来源于stack exchange，提问作者Nahid From Japan