Vercel部署的React应用无法请求HTTP后端接口该如何解决？

这是浏览器的混合内容安全限制导致的：Vercel上的站点默认走HTTPS协议，浏览器不允许HTTPS页面主动向HTTP协议的后端端点发起请求，避免安全风险。你之前设置的meta标签Content-Security-Policy: upgrade-insecure-requests无效，是因为ECS后端本身没有配置HTTPS服务，请求被强制升级为HTTPS后没有对应服务可以响应。

• 方案1：给ECS后端配置HTTPS（最推荐，生产环境首选）
  给ECS上的后端服务配置SSL证书即可支持HTTPS访问，可直接申请Let's Encrypt免费证书，配合Nginx做反向代理挂载证书，之后把前端所有请求地址替换为HTTPS前缀的ECS端点即可。
• 方案2：通过Vercel Serverless Function做代理转发
  在你的React项目根目录新建api文件夹，新增对应代理接口，前端所有请求先发到同域的Vercel Serverless接口，再由服务端转发到ECS的HTTP端点，服务端请求不受浏览器混合内容规则限制。
  简单的代理示例代码：

  export default async function handler(req, res) {
    // 替换为你的ECS HTTP接口地址
    const target = `http://你的ECS公网IP/路径${req.url}`;
    const backendRes = await fetch(target, {
      method: req.method,
      headers: req.headers,
      body: ['POST', 'PUT', 'PATCH'].includes(req.method) ? req.body : undefined
    });
    const resData = await backendRes.text();
    res.status(backendRes.status).send(resData);
  }
  

• 方案3：仅本地调试用（不适合生产）
  本地测试时可给浏览器添加启动参数关闭混合内容限制，或者在浏览器安全设置中给你的Vercel站点开放不安全内容访问权限，该方案仅适合开发调试，普通用户访问依然会触发报错。

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