AWS部署问题：S3托管React前端如何与EC2上Django后端通信

核心配置错误修正 #

1. 前端Axios请求路径无效（S3部署后package.json的proxy失效） #

package.json里的proxy配置只对本地开发服务器（create-react-app的dev server）生效，部署到S3后是纯静态文件，没有反向代理服务，必须让Axios直接请求后端的完整公网地址：

// 替换成你的EC2弹性IP或域名
axios.get("http://your-ec2-elastic-ip/api/todos/")

如果要区分本地/生产环境，可通过环境变量注入：

• 本地创建.env文件：REACT_APP_API_URL=http://localhost:8000
• 生产构建前设置环境变量（Linux/macOS）：REACT_APP_API_URL=http://your-ec2-elastic-ip npm run build
• 代码中使用：

axios.get(`${process.env.REACT_APP_API_URL}/api/todos/`)

2. Django CORS配置错误 #

• 新版本django-cors-headers（v3.10+）已废弃CORS_ORIGIN_WHITELIST，改用CORS_ALLOWED_ORIGINS，需填入S3前端的实际访问地址（不是IP:3000，3000是本地开发端口）：

# settings.py
CORS_ALLOWED_ORIGINS = [
    "http://your-bucket-name.s3-website-us-east-1.amazonaws.com",
    # 若使用自定义域名，也需添加
]

• 测试阶段可临时允许所有源（生产环境禁用）：

CORS_ALLOW_ALL_ORIGINS = True

• 确保中间件顺序正确：corsheaders.middleware.CorsMiddleware必须放在django.middleware.common.CommonMiddleware之前：

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

EC2后端服务配置检查 #

• 确保Django服务监听0.0.0.0而非localhost，否则仅EC2本地可访问：
  • 开发服务器：python manage.py runserver 0.0.0.0:80
  • 生产用gunicorn：gunicorn --bind 0.0.0.0:80 your_project.wsgi
• 安全组入站规则：开放后端服务端口（如80），允许HTTP访问（可暂时设为0.0.0.0/0测试，生产环境限制为S3前端地址）
• 验证后端可独立访问：在本地浏览器直接访问http://your-ec2-elastic-ip/api/todos/，确认能返回JSON数据

S3前端静态网站配置检查 #

• 开启S3桶的静态网站托管，设置索引文档为index.html，错误文档也设为index.html（适配React单页应用路由）
• 配置桶策略，允许公开访问静态文件（示例）：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
    ]
}

ELB与证书的必要性说明 #

• ELB：非必须，免费套餐内可使用，但测试阶段直接用EC2弹性IP即可满足需求
• SSL证书：HTTP通信无需证书，若要部署生产环境，可通过ACM申请免费证书，搭配CloudFront实现HTTPS（CloudFront流量在免费额度内）

常见排查步骤 #

1. 打开前端页面的浏览器控制台（F12），查看网络请求的具体错误：
   • CORS错误：优先检查Django的CORS配置和S3前端地址是否正确
   • 请求超时/无法访问：检查EC2安全组、服务是否正常启动、端口是否监听0.0.0.0
2. 用curl命令测试后端接口：curl http://your-ec2-elastic-ip/api/todos/，确认接口正常响应

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