Next.js本地环境API重定向至HTTPS localhost失败解决方案咨询

问题根源是后端API会根据请求的协议头判断是否需要重定向，本地Next.js以HTTP运行时，转发的请求会被后端识别为HTTP协议，从而强制重定向到HTTPS的localhost地址，而本地未配置HTTPS导致失败。以下是两种可行的解决方法：

方法一：修改Rewrite配置，伪造请求协议头 #

在next.config.js的rewrites配置中添加请求头，让后端认为原始请求是HTTPS协议：

async rewrites() {
  return [
    {
      source: "/api/graphql",
      destination: "https://test-api/api/graphql",
      headers: {
        // 告诉后端原始请求使用HTTPS协议
        'X-Forwarded-Proto': 'https',
        // 可选：如果后端会根据Host头跳转，设置为后端域名避免跳转到localhost
        'Host': 'test-api'
      }
    }
  ];
}

修改后，后端会认为请求来自HTTPS环境，不会触发到localhost的HTTPS重定向。

方法二：本地以HTTPS方式运行Next.js #

直接让本地Next.js服务使用HTTPS，匹配生产环境的协议，这样后端重定向的目标地址https://localhost:3000/api/graphql是可访问的：
使用Next.js的实验性HTTPS启动命令：

next dev --experimental-https

启动后访问https://localhost:3000即可，Next.js会自动生成自签证书（浏览器会有安全警告，开发环境可忽略）。

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