因HTTPS与HTTP不兼容导致FE无法连接BE的解决求助

核心问题 #

浏览器的混合内容安全策略会阻止HTTPS页面加载HTTP资源，必须让前后端协议统一（要么都HTTPS，要么都HTTP），优先推荐统一为HTTPS（更安全，符合现代Web标准）。

方案一：给EC2后端配置HTTPS（推荐） #

1. 绑定域名（可选但推荐） #

如果没有域名，先在AWS Route 53或其他域名服务商注册一个域名，将域名A记录解析到你的EC2公网IP 18.170.213.96。

2. 安装Let's Encrypt免费SSL证书 #

登录EC2实例，执行以下命令（以Ubuntu系统为例）：

# 更新软件包
sudo apt update && sudo apt install certbot -y

# 获取证书（替换成你的域名）
sudo certbot certonly --standalone -d your-domain.com

证书会生成在 /etc/letsencrypt/live/your-domain.com/ 目录下，包含 fullchain.pem 和 privkey.pem。

3. 修改Express后端配置HTTPS #

修改你的Node.js代码，替换原来的HTTP服务为HTTPS：

const express = require('express');
const https = require('https');
const fs = require('fs');
const app = express();

// 配置证书路径
const options = {
  key: fs.readFileSync('/etc/letsencrypt/live/your-domain.com/privkey.pem'),
  cert: fs.readFileSync('/etc/letsencrypt/live/your-domain.com/fullchain.pem')
};

// 原有的路由逻辑保持不变
app.get('/', (req, res) => {
  res.send('Backend running over HTTPS');
});

// 启动HTTPS服务，监听443端口
https.createServer(options, app).listen(443, () => {
  console.log('HTTPS server running on port 443');
});

4. 配置EC2安全组 #

• 开放443端口（HTTPS默认端口），允许所有IP访问（或仅允许前端域名IP）
• 可保留80端口用于HTTP跳转，后续可配置自动重定向到HTTPS

5. 更新前端请求地址 #

将前端中请求后端的地址从 http://18.170.213.96:8080/ 改为 https://your-domain.com/（443端口默认可省略）。

方案二：用AWS API Gateway做HTTPS代理（无需修改后端） #

如果不想给EC2配置证书，可以用API Gateway作为中间层，将HTTPS请求转发到后端HTTP服务：

1. 创建REST API #

• 登录AWS控制台，进入API Gateway服务，点击"创建API"，选择"REST API"
• 选择"新建API"，填写名称后点击"创建"

2. 设置代理集成 #

• 在API中创建一个资源，勾选"配置为代理资源"，点击"创建资源"
• 集成类型选择"HTTP"，输入后端地址 http://18.170.213.96:8080/{proxy}，HTTP方法选"ANY"
• 保存集成配置

3. 部署API #

• 点击"部署API"，选择"新建阶段"（比如命名为prod），点击"部署"
• 部署完成后会得到一个HTTPS的API地址，比如 https://xxxxxx.execute-api.region.amazonaws.com/prod

4. 配置EC2安全组 #

• 修改EC2安全组，允许API Gateway的IP段访问8080端口（或者暂时允许所有IP，后续再限制）

5. 更新前端请求地址 #

将前端请求地址替换为上述API的HTTPS地址。

不推荐的方案：将Amplify前端改为HTTP #

Amplify默认强制HTTPS，且现代浏览器对HTTP页面的限制越来越多（比如禁止Cookie的Secure属性），会导致后续更多问题，因此不建议采用。如果非要尝试，需要在Amplify控制台的"域名管理"中关闭HTTPS强制跳转，但仅用于测试，不适合生产环境。

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