关于Next.js的反向代理

2 年 ago

雅, 悟

1 minute

事件

在 Amazon ECS 上部署的 FE（前端）容器和 BFF（后端为前端）容器之间的通信出了问题，导致 CORS 错误和混合内容错误。CORS（跨源资源共享）是一种机制，用于控制在不同源之间共享资源。混合内容错误是指当不安全的内容（HTTP）加载到安全页面（HTTPS）时发生的错误。

Access to XMLHttpRequest at '<BFFの/graphqlエンドポイント>' from origin '<FEのエンドポイント>' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

在常规架构中的通信方式

一般而言，FE和用户之间的通信通常使用HTTPS进行安全传输，而内部服务之间的通信则较常使用HTTP。这是因为内部通信在受信任的网络内进行，为避免HTTPS的开销而进行优化。

处理方法 fǎ)

为了暂时解决这个错误，Next.js提供了一种方法，可以利用next.config.js中的rewrites功能来进行反向代理的设置。通过使用反向代理，可以中继不同起源之间的请求，从而避免CORS错误。

在以下的设置示例中，我们将来自前端（FE）对/graphql的请求在内部重定向到BFF的/graphql端点。

module.exports = {
  // 他の設定
  async rewrites() {
    return [
      {
        source: "/graphql",
        destination: `${process.env.NEXT_PUBLIC_BFF_ENDPOINT}/graphql`,
      },
    ];
  },
};

通过这个设置，来自 FE 的请求将直接发送到 BFF 进行请求，避免了 CORS 错误和混合内容错误。