如何将Vercel前端连接至AWS EC2后端及解决HTTPS混合内容问题

一、先修复EC2公网无法访问Django的问题 #

• 检查EC2安全组：开放Django运行端口（如8000）、80端口、443端口，来源暂时设为0.0.0.0/0（生产环境可限制为Vercel IP段）。
• 调整Django启动命令：必须绑定0.0.0.0而非默认的127.0.0.1，命令示例：python manage.py runserver 0.0.0.0:8000（生产环境建议用Gunicorn/uWSGI替代自带服务器）。
• 检查EC2防火墙：如果用了ufw/iptables，执行ufw allow 8000开放对应端口。

二、给EC2后端配置HTTPS（Nginx+Let's Encrypt） #

1. 安装依赖 #

sudo apt update && sudo apt install nginx certbot python3-certbot-nginx

2. 配置Nginx反向代理 #

编辑Nginx站点配置文件/etc/nginx/sites-available/django-backend：

server {
    listen 80;
    server_name 你的EC2公网DNS;

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

创建软链接并重启Nginx：

sudo ln -s /etc/nginx/sites-available/django-backend /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl restart nginx

3. 申请SSL证书并自动配置HTTPS #

sudo certbot --nginx -d 你的EC2公网DNS

按照提示选择"自动将HTTP请求重定向到HTTPS"，完成后Nginx会自动更新SSL相关配置。

三、处理前后端跨域问题 #

前端在Vercel、后端在EC2，需配置Django允许跨域：

• 安装CORS插件：pip install django-cors-headers
• 修改Django的settings.py：

INSTALLED_APPS = [
    # ... 其他已安装应用
    'corsheaders',
]

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

# 允许你的Vercel前端域名访问，示例：https://your-vercel-project.vercel.app
CORS_ALLOWED_ORIGINS = [
    "https://your-vercel-project.vercel.app",
]

# 若需传递Cookie，添加以下配置（按需开启）
# CORS_ALLOW_CREDENTIALS = True

重启Django服务（用Gunicorn/uWSGI的话同步重启）。

四、验证连通性 #

前端调用后端API时，直接使用EC2的HTTPS地址（如https://你的EC2公网DNS/api/xxx），此时混合内容错误会消除，跨域请求也能正常响应。

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