Heroku上React+DRF应用API调用时出现CORS错误求助

以下是针对你遇到的问题的排查和解决步骤：

1. 确认域名配置准确性 #

检查CORS_ALLOWED_ORIGINS中的前端域名是否与实际部署的前端URL完全一致：

• 必须包含完整的https://前缀，不能省略
• 域名拼写要完全匹配，比如是否多了/少了字符，或者前端是带www的版本？
• 可以临时将CORS_ORIGIN_ALLOW_ALL = True，如果此时CORS错误消失，说明问题出在域名配置不匹配。

2. 检查django-cors-headers中间件顺序 #

在settings.py的MIDDLEWARE列表中，必须将CorsMiddleware放在CommonMiddleware之前，这是关键：

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

3. 配置HTTPS环境下的Cookie参数 #

因为Heroku使用HTTPS，需要确保以下Cookie配置正确，否则带credentials的请求会失败：

SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
CSRF_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SAMESITE = 'None'

SAMESITE = 'None'是跨域带凭证请求的必要配置，配合CORS_ALLOW_CREDENTIALS = True生效。

4. 验证请求头配置 #

你的CORS_ALLOW_HEADERS已经包含authorization，这没问题，但可以确认前端请求的Authorization头是否正确生成。另外，注意前端fetch的body是JSON.stringify({})，如果后端接口需要解析请求体，确保DRF的JSONParser已启用（默认是启用的）。

5. 检查Heroku环境变量（若使用） #

如果是通过环境变量配置CORS_ALLOWED_ORIGINS，确保环境变量值正确读取：

import os
CORS_ALLOWED_ORIGINS = [os.environ.get('FRONTEND_DOMAIN')]

避免硬编码时的拼写错误。

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