本地Django与React项目间CORS错误排查求助

以下是可能遗漏的配置或需要检查的关键点：

• 检查corsheaders中间件顺序
  CorsMiddleware必须放在django.middleware.common.CommonMiddleware之前，且尽量靠前（在SecurityMiddleware之后即可）。错误的顺序会导致CORS响应头无法被添加到响应中。正确的中间件配置示例：

  MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',
      'corsheaders.middleware.CorsMiddleware',  # 必须在CommonMiddleware之前
      'django.middleware.common.CommonMiddleware',
      # 其他中间件...
  ]
  

• 验证请求Origin的精确匹配
  前端请求的Origin必须与CORS_ALLOWED_ORIGINS中的条目完全一致（包括协议、域名、端口）。可以在Django接口中打印实际请求的Origin来确认：

  # 在你的tournaments视图函数中添加
  def tournaments_view(request):
      print(request.META.get('HTTP_ORIGIN'))  # 查看实际请求的Origin
      # 其他逻辑...
  

  确保打印出的Origin存在于CORS_ALLOWED_ORIGINS列表中。

• 清除浏览器或Django缓存
  浏览器可能缓存了未包含CORS头的旧响应，尝试用隐身模式访问或清空浏览器缓存测试。如果Django启用了缓存，临时禁用缓存或重启服务，避免返回缓存的旧响应。

• 排查其他中间件的干扰
  某些安全类中间件可能会修改或移除响应头，检查你的MIDDLEWARE列表，确认没有其他中间件在CorsMiddleware之后覆盖了响应头。如果有，调整中间件顺序或针对该接口排除这些中间件的影响。

• 确认corsheaders版本兼容性
  确保django-cors-headers版本与你的Django版本兼容。比如Django 4.x需要django-cors-headers>=3.10.0，版本不匹配可能导致配置不生效，可通过pip show django-cors-headers查看版本，必要时升级：

  pip install --upgrade django-cors-headers
  

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