如何在Django中处理CORS？React对接Heroku部署Django跨域报错

1. 修正CORS配置格式错误 #

你当前的CORS_ALLOW_ORIGINS和CSRF_TRUSTED_ORIGINS存在两处格式问题：

• localhost缺少协议头（本地React默认端口一般是3000，需补全为http://localhost:3000）
• 线上地址末尾多了斜杠，需删除，正确格式为https://itbookcom.herokuapp.com

修改后的配置代码：

CORS_ALLOW_ORIGINS = [
    'http://localhost:3000',  # 按本地React实际端口调整
    'https://itbookcom.herokuapp.com'
]

CSRF_TRUSTED_ORIGINS = [
    'http://localhost:3000',
    'https://itbookcom.herokuapp.com'
]

2. 确认CORS中间件加载顺序 #

在settings.py的MIDDLEWARE列表中，必须将corsheaders.middleware.CorsMiddleware放在django.middleware.common.CommonMiddleware之前，否则中间件不会生效：

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

3. 排查Heroku线上配置同步问题 #

• 确保本地的settings.py修改已经提交并部署到Heroku，避免配置未同步
• 运行heroku logs --tail查看线上日志，获取跨域错误的具体细节（比如是否存在Origin被拒绝的记录）

4. 处理媒体文件跨域与存储问题 #

本地图片无法获取、线上可能存在同类问题，需同步处理：

• 线上环境不要依赖Heroku临时文件系统存储图片，使用django-storages将媒体文件托管到S3等云存储服务
• 若暂时使用本地存储，需确保Django配置允许媒体文件路径的跨域访问

5. 验证请求地址与浏览器错误详情 #

• 直接在浏览器访问https://itbookcombackend.herokuapp.com/api/books/，确认接口本身可正常返回数据
• 查看浏览器控制台的跨域错误提示，区分是CORS策略拦截还是CSRF验证失败

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