如何配置Django设置以允许React Native移动应用连接Heroku部署的API？

1. 配置Django的ALLOWED_HOSTS #

需要在settings.py中添加以下主机地址：

• Heroku应用的官方域名，格式为{你的应用名}.herokuapp.com
• 本地开发/真机调试时，添加你的电脑局域网IP（例如192.168.1.105），React Native真机通过局域网访问本地后端时会用到
• 开发环境辅助地址：localhost、127.0.0.1

示例代码：

ALLOWED_HOSTS = [
    'your-app-name.herokuapp.com',
    '192.168.1.105',  # 替换为你的电脑局域网IP
    'localhost',
    '127.0.0.1'
]

2. 配置CORS跨域权限（核心修复步骤） #

React Native发起的是跨域请求，必须配置Django允许其来源：

1. 先确保项目安装了django-cors-headers包（生产环境要把它加入requirements.txt）
2. 在settings.py中做如下配置：

INSTALLED_APPS = [
    # 已有应用
    'corsheaders',  # 新增
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 放在CommonMiddleware之前
    'django.middleware.common.CommonMiddleware',
    # 已有中间件
]

# 生产环境指定允许的来源（推荐）
CORS_ALLOWED_ORIGINS = [
    "https://your-web-frontend-domain.com",  # 你的Web前端域名
    "http://localhost:8081",  # iOS模拟器默认地址
    "http://10.0.2.2:8081",  # Android模拟器默认地址（映射到本地localhost）
    "http://192.168.1.108:8081",  # 真机调试时的手机IP
]

# 开发环境可临时允许所有来源（生产环境禁用）
# CORS_ALLOW_ALL_ORIGINS = True

3. Heroku生产环境额外检查 #

• 确保DEBUG = False，生产环境下Django会严格校验ALLOWED_HOSTS
• 可以通过环境变量动态获取Heroku主机，避免硬编码：

import os
ALLOWED_HOSTS = [os.environ.get('HEROKU_APP_DOMAIN', 'localhost'), '192.168.1.105']

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