Azure Chatの x-forwarded-host エラーを解消する

前回カスタムドメインを設定した Azure Chat の続きです。

tsubalog.hatenablog.com

カスタムドメインを設定し、Azure Chat に認証できるようになりましたが、いざ New Chat をするとエラーになりました。

どうやらバックエンドでエラーが起きているようで、Web App のログを確認すると以下のエラーが出力されていました。
（ドメインはダミーに書き換えています）

`x-forwarded-host` header with value `xxx.azurewebsites.net` does not match `origin` header with value `xxx.example.com` from a forwarded Server Actions request. Aborting the action.

Next.js なんも分からん勢なのでググってみたところ、こちらの Discussions にたどり着きました。

github.com

この内容によれば next.config.js に自身の URL を含めると良いとのこと。

const nextConfig = {
    // ... your other configs ...
    headers: [
        {
          key: 'Access-Control-Allow-Origin',
          value: process.env.NEXT_PUBLIC_APP_URL,
        },
    ],
}

export default nextConfig;

しかしこれではエラーは解消しませんでした。
念の為に value に実際の URL やドメインを記入しても同様です。

次に、別の Issue を確認しました。

github.com

これによると、同様に next.config.js にオリジン許可の設定 allowedOrigins を入れると良いとのこと。
※ xxx.example.com は実際のカスタムドメインに置き換えてください。

const nextConfig = {
  output: "standalone",
  experimental: {
    serverComponentsExternalPackages: ["@azure/storage-blob"],
    serverActions: {
      allowedOrigins: ["xxx.example.com"]
    }
  },
};

module.exports = nextConfig;

これでエラーが解消しました。めでたしめでたし。

nextjs.org

---

このエラーが起きた理由ですが、カスタムドメインでアクセスしているものの、アプリケーションとしては Web App にホストしているため、自身の URL のドメイン ( .azurewebsites.net ) と一致しないということだと想像します。