HTTPS前端如何请求HTTP API？无成本解决方案咨询

核心问题是浏览器的混合内容安全政策：HTTPS页面（Vercel部署的Next.js）不允许发起HTTP请求，必须把后端的HTTP请求通过HTTPS代理层转发，以下是几个无成本的实现方式：

方案1：Cloudflare Workers 免费反向代理 #

Cloudflare Workers提供每天10万请求的免费额度，自带HTTPS域名，可作为中间层转发请求到你的ECS Flask服务：

1. 注册Cloudflare账号，进入Workers页面创建新Worker
2. 替换Worker代码为以下内容（替换YOUR_ECS_HTTP_URL为你的Flask服务地址）：

export default {
  async fetch(request) {
    const url = new URL(request.url);
    const targetUrl = new URL("YOUR_ECS_HTTP_URL");
    targetUrl.pathname = url.pathname;
    targetUrl.search = url.search;

    // 处理CORS预检请求
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type',
        },
      });
    }

    const modifiedRequest = new Request(targetUrl.toString(), {
      method: request.method,
      headers: request.headers,
      body: request.body,
      redirect: 'follow',
    });

    const response = await fetch(modifiedRequest);
    const modifiedResponse = new Response(response.body, response);
    modifiedResponse.headers.set('Access-Control-Allow-Origin', '*');
    return modifiedResponse;
  },
};

3. 部署Worker后，得到一个类似xxx.yyy.workers.dev的HTTPS域名，前端直接请求这个域名即可。

方案2：AWS API Gateway 免费层代理 #

AWS API Gateway有每月100万请求的免费额度，自带HTTPS，可作为代理转发到ECS服务：

1. 进入AWS控制台的API Gateway，创建REST API
2. 创建资源和方法（比如/api/*，支持GET/POST等），设置集成类型为HTTP，集成端点为你的ECS Flask服务地址
3. 启用CORS：在资源上配置CORS，允许Origin为你的Vercel前端域名（或*用于测试），允许对应的请求方法和Headers
4. 部署API到一个阶段（比如prod），得到一个HTTPS的API地址（类似https://xxx.execute-api.region.amazonaws.com/prod），前端用这个地址发起请求。

方案3：修复Next.js Rewrites 配置 #

你之前的rewrites无效大概率是配置问题，Vercel的rewrites是服务器端代理，不会触发浏览器的混合内容报错，正确配置示例：
在next.config.js中添加：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'YOUR_ECS_HTTP_URL/:path*', // 替换为你的Flask服务地址
      },
    ];
  },
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: '*' },
          { key: 'Access-Control-Allow-Methods', value: 'GET, POST, PUT, DELETE, OPTIONS' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

配置后，前端请求/api/xxx，Vercel会在服务器端转发到你的ECS HTTP服务，浏览器只会看到HTTPS请求，不会报错。注意要确保ECS服务能被Vercel的服务器访问（比如ECS所在VPC的安全组允许公网访问）。

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