事象
Amazon ECSにてデプロイしてるFEコンテナとBFFコンテナの疎通がうまくいかず、CORSエラーや混合コンテンツエラーが発生してました。CORS（Cross-Origin Resource Sharing）は、異なるオリジン間でのリソースの共有を制御するためのメカニズムです。混合コンテンツエラーは、安全でないコンテンツ（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のオーバーヘッドを避けるための最適化として行われます。
対処法
そのエラーを一時的に解消するための一つの方法として、Next.jsでは、next.config.jsのrewrites機能を利用して、リバースプロキシの設定を行うことができます。リバースプロキシを使用することで、異なるオリジン間のリクエストを中継し、CORSエラーを回避することができます。
以下の設定例では、FEからの/graphqlへのリクエストを、BFFの/graphqlエンドポイントに内部的にリダイレクトしています。
next.config.js
module.exports = {
// 他の設定
async rewrites() {
return [
{
source: "/graphql",
destination: `${process.env.NEXT_PUBLIC_BFF_ENDPOINT}/graphql`,
},
];
},
};
この設定により、FEからのリクエストはBFFに直接リクエストされるようになり、CORSエラーや混合コンテンツエラーを回避できます。
自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！