Django-React架构下CORS跨域请求失败问题求助

我之前也碰到过几乎一模一样的坑！这本质是Django的自动重定向机制和CORS配置的顺序没配合好导致的，给你几个实用的解决步骤：

1. 确保django-cors-headers配置正确且顺序无误 #

这是最常见的问题根源，很多人安装了库但没把中间件放对位置：

• 首先确认已经安装依赖：

  pip install django-cors-headers
  

• 打开settings.py，先把corsheaders加入INSTALLED_APPS：

  INSTALLED_APPS = [
      # 其他已有的app
      'corsheaders',
  ]
  

• 重点：调整中间件顺序，必须让CorsMiddleware排在CommonMiddleware前面（因为CommonMiddleware负责处理不带斜杠URL的重定向，CORS中间件要先介入才能给重定向响应加上必要的头）：

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

• 配置允许的跨域源，把你的React服务地址加进去：

  CORS_ALLOWED_ORIGINS = [
      "http://localhost:3000",
      "http://127.0.0.1:3000",  # 保险起见加上，避免浏览器地址解析差异
  ]
  # 开发环境临时测试可以用下面的，但生产环境绝对不要开
  # CORS_ALLOW_ALL_ORIGINS = True
  

2. 直接使用带斜杠的API URL（临时快速解决） #

Django默认会把不带尾斜杠的URL重定向到带斜杠的版本，你可以直接在React的请求里写完整的带斜杠地址：

// 把原来的 http://127.0.0.1:8000/products/view 改成
fetch('http://127.0.0.1:8000/products/view/')
  // 后续逻辑...

这个方法能绕过重定向问题，但还是建议把CORS配置弄对，避免后续其他接口出现同样问题。

3. 清除浏览器缓存后测试 #

有时候浏览器会缓存旧的响应头，导致配置修改后不生效。可以打开Chrome的隐身窗口，或者手动清除缓存（Ctrl+Shift+Delete）再测试。

我当时就是把中间件顺序搞反了，调整之后立刻就解决了！你先试试第一步的中间件顺序调整，这应该是最核心的修复点。

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