部署在Netlify上的应用HTTP请求被拦截问题求助

问题原因 #

你的Netlify站点通过HTTPS加载，但代码里直接调用了HTTP协议的API地址，浏览器出于安全策略会拦截这种混合内容请求，导致API调用失败。

解决方案 #

方案1：给API配置HTTPS（推荐） #

这是彻底解决问题的方式，现代浏览器对HTTPS的支持是强制趋势。你可以：

• 给API服务器配置SSL证书（比如用Let's Encrypt免费证书），让API支持HTTPS访问。
• 修改代码里的API地址为HTTPS协议，比如将"http://34.225.132.160:8002/api/"改为"https://34.225.132.160:8002/api/"（注意确认API服务器的HTTPS端口是否正确，通常是443，可能需要调整端口号）。

方案2：用Netlify重定向代理API请求（无需修改API） #

通过Netlify的重定向功能，将前端的API请求代理到目标HTTP API，避免浏览器直接发起HTTP请求：

1. 修改public/_redirects文件的规则为：

   /api/* http://34.225.132.160:8002/api/:splat 200
   

   这个规则的作用是：将站点下所有/api/开头的请求，代理到目标API对应的路径。
2. 修改React代码里的axios请求地址为相对路径：

   const response = await axios.post(
     "/api/", // 改为相对路径
     {email: email}
   );
   

3. 重新部署到Netlify，Netlify会自动应用重定向规则，此时前端请求会先发送到Netlify的HTTPS服务器，再由Netlify代理到目标HTTP API，规避混合内容限制。

方案3：临时允许混合内容（仅测试用，不推荐） #

在浏览器设置里临时允许混合内容，但这只适合本地测试，生产环境不可用，且会降低站点安全性，不建议使用。

注意事项 #

• 确保_redirects文件放在public文件夹的根目录，Netlify部署时会自动识别该文件。
• 部署后可以在Netlify站点的「Site settings」->「Redirects」页面查看规则是否成功加载。

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