POST 和 PUT 上的 ASP.Net Core Boilerplate Angular 10 IIS HTTP 错误 400

Question

我目前有一个基本的 ASP.Net 样板。 Core 3.1 项目，我在 IIS 上托管，并希望在同一 URL 但在不同的段上提供 Angular 10 应用程序。我已经通过 HTTP 上的 Angular 和 Https 上的 API 成功实现了这一点，但在 HTTP 和 POST 或 PUT 上都有问题。

例如

API - https://application/api

Angular 网络应用 - https://application/app

目前，我的 IIS 配置在主 ASP 构建目录中。在 build 目录中，我有一个 Angular 目录，用于构建发布 Angular 应用程序。

我目前的问题是，当我进行任何 POST/PUT 时，我得到 400。在日志中我得到

所需的防伪标头值“X-XSRF-TOKEN”不存在。 Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException：所需的防伪标头值“X-XSRF-TOKEN”不存在。

现在，当我查看一个成功的请求时，例如在 HTTP 上运行的 Angular 和在 Https 上运行的 API，上面提到的这个标头不存在。我看到的是另一个请求（OPTIONS）并获得状态码 204。

如果我设置了属性，则请求在有效负载方面是正确的

[IgnoreAntiforgeryToken]

POST 和 PUT 成功。

更新 - 我注意到如果我导航到 Swagger，会生成一个 XSRF-TOKEN cookie。如果我删除 cookie，POST 和 PUT 就可以了，我没有问题。

我认为通过在 swagger 实现中停止 XSRF 令牌应该很容易解决，但这会留下潜在的安全问题吗？也许另一种选择是让 Angular 应用程序删除 cookie？

任何想法都将不胜感激。

基思

Answer 1

通过在 Angular 应用程序中创建 HTTP 拦截器并检查“XSRF-TOKEN”cookie 然后将标头添加到请求中解决了该问题。

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class AddCsrfHeaderInterceptorService implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      const requestToken = this.getCookieValue('XSRF-TOKEN');
      return next.handle(req.clone({
          headers: req.headers.set('X-XSRF-TOKEN', requestToken)
      }));
  }

  private getCookieValue(cookieName: string) {
    const allCookies = decodeURIComponent(document.cookie).split('; ');
    for (let i = 0; i < allCookies.length; i++) {
        const cookie = allCookies[i];
        if (cookie.startsWith(cookieName + '=')){
            return cookie.substring(cookieName.length + 1);
        }
    }
    return '';
  }
} 

通过提供者将拦截器添加到模块中：

@NgModule({ ...
 providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AddCsrfHeaderInterceptorService, multi: true }
]
....