Abp Angular 与 Abp API 同域部署：解析问题与感悟

在处理中大型项目时，我们通常将Angular与API分布在两个站点中，以实现职能划分清晰，同时便于团队协同管理。然而，对于小型项目而言，将Angular与API部署在同一站点（即同域名）下，也是一个不错的选择。

然而，由于Abp项目的API内置了CSRF/XSRF和防伪系统，将Abp Angular与Abp API在同域下运行时，可能会引发一些问题。具体来说，在Angular中发送Delete、Put、Post请求API时，可能会导致Http状态码为400的错误，并且在日志中却没有任何有意义的错误提示。

最近，我在将一个小型个人项目在同域下部署Abp Angular与Abp API时，遇到了一些麻烦。尽管我之前在分离部署Abp Angular和Abp API项目方面非常熟练，但在同域下部署时出现错误时，我仍然过于自信地认为问题不在程序中，而可能是服务器环境的问题。这导致我在错误的方向上浪费了大量宝贵的时间。

直到我在本机同域下运行Abp Angular和Abp API项目时，才明确了真实的错误原因：

The required antiforgery header value "RequestVerificationToken" is not present.

我顿时恍然大悟，原来是API中的CSRF/XSRF防伪系统阻止了同域下Angular程序的请求。

通过查询资料，我发现Abp团队成员@hikalkan在2020年已经提供了解决方案，具体内容请参见Abp Framework issues中的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，还编写了详尽的文档，为我们解决问题提供了重要的支持。这一经验也提醒我们，在面对问题时不要过于自信，时刻保持对可能性的敏感性，并善用团队和文档资源，以更高效地解决技术难题。