React+Node.js部署AWS EC2后Chrome自动转HTTPS致脚本加载错误

嘿，我明白你遇到的麻烦了——本地跑好好的待办应用，部署到EC2后Chrome非要把HTTP资源转成HTTPS，结果直接报错，但用Postman走HTTP又完全正常。这事儿其实是浏览器的安全策略在搞鬼，咱们一步步来解决：

先搞懂问题根源 #

Chrome有自动把HTTP请求升级为HTTPS的机制（比如HSTS安全策略，或者浏览器默认的安全跳转），但你的EC2实例目前只跑在HTTP协议上，没有配置有效的SSL证书，所以强制转HTTPS后，浏览器就会因为证书不匹配/缺失而报错。

方案1：临时调试用——关掉Chrome的HTTPS自动升级 #

如果你只是想先验证问题，可以临时关闭这个功能：

• 在Chrome地址栏输入 chrome://net-internals/#hsts
• 找到「Delete domain security policies」，输入你的EC2域名 ec2-18-188-23-132.us-east-2.compute.amazonaws.com，点击「Delete」
• 清除浏览器缓存后重新访问

但这只是临时方案，其他用户访问还是会踩坑，所以更推荐下面的永久解决办法。

方案2：让React build时生成HTTP资源链接 #

React打包时会根据环境生成资源路径，你可以明确指定PUBLIC_URL为HTTP地址，避免生成HTTPS链接：

• 在EC2的终端里执行：

  PUBLIC_URL=http://ec2-18-188-23-132.us-east-2.compute.amazonaws.com:3002 npm run build
  

• 重新部署生成的build文件夹，里面的脚本、CSS链接就会是HTTP开头的，浏览器就不会强制跳转了

方案3：生产环境推荐——给EC2配置HTTPS #

如果是要上线的应用，最好直接配置HTTPS，完全规避这个问题：

1. 申请免费SSL证书：用Let's Encrypt的免费证书，通过Certbot工具一键安装
2. 配置Nginx反向代理：把HTTPS请求转发到你的Node.js服务（3002端口），示例配置如下：

   server {
       listen 80;
       server_name ec2-18-188-23-132.us-east-2.compute.amazonaws.com;
       # 把HTTP请求重定向到HTTPS
       return 301 https://$host$request_uri;
   }
   
   server {
       listen 443 ssl;
       server_name ec2-18-188-23-132.us-east-2.compute.amazonaws.com;
   
       ssl_certificate /path/to/your/certificate.pem;
       ssl_certificate_key /path/to/your/private-key.pem;
   
       location / {
           proxy_pass http://localhost:3002;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
   

3. 重启Nginx，之后用HTTPS地址访问应用就完全正常了

方案4：检查Node.js服务的响应头 #

有时候你的Node.js服务可能不小心设置了Strict-Transport-Security响应头，导致浏览器强制用HTTPS。比如Express里如果有这段代码：

app.use((req, res, next) => {
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
  next();
});

可以先注释掉，测试是否解决问题，等配置好HTTPS后再重新启用。

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