Abp Angular と Abp API の同一ドメインデプロイ：問題の分析と洞察

中規模から大規模なプロジェクトに取り組む場合、通常はAngularとAPIを二つの異なるサイトに分け、機能を明確に区別し、チームの協力を効果的に行います。ただし、小規模なプロジェクトに対しては、AngularとAPIを同じサイト（すなわち、同じドメイン）にデプロイすることも選択肢となります。

AbpプロジェクトのAPIにはCSRF/XSRFおよび防偽システムが組み込まれており、Abp AngularとAbp APIを同じドメインで実行すると、AngularがDelete、Put、PostリクエストをAPIに送信する際に、400のHTTPステータスコードのエラーが発生し、意味のあるエラーログがないかもしれません。

最近、私は小規模な個人プロジェクトをAbp AngularとAbp APIを同じドメインでデプロイする際に数時間にわたり苦労しました。以前にAbp AngularとAbp APIを分離してデプロイすることに精通していたにもかかわらず、同じドメインでのデプロイ時にエラーが発生した際に、プログラムの問題ではなく、おそらくサーバー環境の問題かもしれないと過度に自信を持ってしまいました。この誤った自信が、誤った方向に大量の貴重な時間を浪費する原因となりました。

ローカルで同じドメインでAbp AngularとAbp APIを実行したときに、"RequestVerificationToken"という必要な防偽ヘッダー値が存在しないという真のエラーが明示されました。API内のCSRF/XSRF防偽システムが同じドメイン内のAngularプログラムのリクエストをブロックしていたことが一気に理解できました。

調査の結果、Abpチームのメンバーである@hikalkanが2020年に既に解決策を提供していたことが分かりました。具体的な内容は、https://github.com/abpframework/abp/pull/5728で確認できます。さらに、Abp Framework CSRF/XSRF＆Anti Forgery Systemの文書には、Abp AngularとAbp APIを同じドメインでデプロイするための詳細な説明があります。

解決策は非常に単純で、APIのURLからドメインを削除するだけです。具体的なコードは以下の通りです：

export const environment = {
 production: true,
 // ....
 apis: {
   default: {
     url: '', // <- should be an empty string, not '/'
     // ...
   },
 },
} as Config.Environment;

この場を借りて、Abpチームに心から感謝申し上げます。Abp Frameworkの開発と詳細な文書の作成において、彼らの無償の奉仕に感謝します。この経験は、問題に直面した際に過度な自信を持たず、常に可能性に対する感受性を保ち、技術的な課題をより効率的に解決するためにチームと文書のリソースを上手に活用することの重要性を教えてくれます。