S3部署React对接EC2 Flask后端HTTPS跨域请求失败求助

1. 开放EC2的443端口 #

登录AWS控制台，进入目标EC2实例的安全组配置，检查入站规则：

• 必须添加一条允许0.0.0.0/0（或前端域名所在IP段）访问443端口的规则。HTTP请求正常说明80端口已开放，但HTTPS依赖的443端口大概率未配置。

2. 校验Nginx的HTTPS配置 #

检查Nginx的HTTPS站点配置文件（通常位于/etc/nginx/sites-available/或/etc/nginx/conf.d/目录），确保包含以下核心配置：

server {
    listen 443 ssl;
    server_name ec2-ip; # 若后端绑定了域名，替换为对应域名

    ssl_certificate /path/to/valid/cert.pem;
    ssl_certificate_key /path/to/valid/private-key.pem;

    location / {
        proxy_pass http://127.0.0.1:8000; # 匹配Gunicorn监听的端口
        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 -t验证配置语法，无错误后重启Nginx：sudo systemctl restart nginx
• 查看Nginx错误日志（/var/log/nginx/error.log），排查是否存在证书路径错误、权限不足等启动异常。

3. 修正Flask-CORS配置 #

确保CORS规则明确允许前端的HTTPS域名，而非仅支持HTTP：

from flask_cors import CORS

app = Flask(__name__)
# 生产环境建议指定具体允许的源，避免通配符带来的安全风险
CORS(app, origins=["https://myproject.mycompany.com"])

• 若存在自定义请求拦截逻辑，需确保不会拦截OPTIONS预检请求（Flask-CORS默认会处理，但自定义拦截器可能覆盖该逻辑）。

4. 解决前端请求的证书问题 #

若前端直接请求https://ec2-ip/login，浏览器会因EC2 IP无有效SSL证书而拒绝连接，进而触发CORS报错：

• 建议给后端绑定一个合法域名（如api.mycompany.com），通过Let's Encrypt等工具配置免费有效的SSL证书。
• 修改前端请求地址为该域名的HTTPS路径，避免直接使用EC2 IP。

5. 测试HTTPS连接有效性 #

• 在EC2实例本地执行curl -v https://localhost/login，确认后端服务通过HTTPS可正常响应。
• 在本地机器执行curl -v https://ec2-ip/login，根据报错信息定位问题：连接超时则是端口未开放，证书报错则需修复证书配置。

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