Django后端与React前端的CORS跨域问题解决方法咨询

Django后端配置（核心解决步骤） #

1. 安装CORS处理依赖 #

在Django项目所在环境执行：

pip install django-cors-headers

2. 修改settings.py配置 #

• 将corsheaders添加到INSTALLED_APPS列表：

  INSTALLED_APPS = [
      # 其他已存在的应用
      'corsheaders',
  ]
  

• 将CORS中间件加入MIDDLEWARE，注意要放在django.middleware.common.CommonMiddleware之前：

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

• 设置允许跨域访问的前端域名：

  CORS_ALLOWED_ORIGINS = [
      "https://frontend.domain.com",
  ]
  

  如果是测试场景需要临时允许所有域名（生产环境不推荐），可替换为：

  CORS_ALLOW_ALL_ORIGINS = True
  

• 若前端请求需要携带Cookie（比如保持登录状态），额外添加配置：

  CORS_ALLOW_CREDENTIALS = True
  

React前端配置（按需调整） #

生产环境无需额外配置，只需确保请求后端接口时：

• 直接使用https://backend.domain.com作为接口前缀
• 若需要携带Cookie，在fetch或Axios请求中设置credentials: 'include'（以fetch为例）：

  fetch('https://backend.domain.com/login/', {
      method: 'POST',
      credentials: 'include',
      // 其他请求参数
  })
  

开发环境本地调试时，可在package.json中添加代理简化请求：

{
  "proxy": "https://backend.domain.com"
}

之后前端请求可直接写相对路径（如/login/），由代理自动转发到后端地址。

内容的提问来源于stack exchange，提问作者vishnu vardhan Gowd