基本身份验证不适用于 XSRF 令牌拦截答案

【问题标题】：Basic authentication does not work with XSRF token interception基本身份验证不适用于 XSRF 令牌拦截
【发布时间】：2021-06-07 20:13:09
【问题描述】：

我正在实现一个简单的身份验证 API，该 API 配置有 Spring Boot，可通过 Basic Auth 访问。这是一个简单的GET API，没有任何参数，仅用于强制浏览器触发身份验证窗口：

localhost:8080/api/auth

我从我的Angular 7.3.10 项目中使用此 API，该项目服务于

localhost:4200

同时我正在使用anti-CSRF 保护，因此我处理所有API 调用，以便为X-XSRF-TOKEN 提供额外的标头。这是我的HttpInterceptor：

export class CustomHttpInterceptor implements HttpInterceptor {
    constructor(private xsrfTokenExtractor: HttpXsrfTokenExtractor) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (req.url.startsWith(environment.apiUrl)) {
            // send request with credential options in order to be able to read cross-origin cookies
            req = req.clone({ withCredentials: true });

            // return XSRF-TOKEN in each request's header (anti-CSRF security)
            const headerName = 'X-XSRF-TOKEN';
            let token = this.xsrfTokenExtractor.getToken() as string;
            if (token !== null && !req.headers.has(headerName)) {
                req = req.clone({ headers: req.headers.set(headerName, token) });
            }
        }
        return next.handle(req);
    }
}

现在，当我在 Angular 应用程序中调用 auth 端点时，我开始编写凭据，然后出现以下错误：

Access to XMLHttpRequest at 'http://localhost:8080/api/auth' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

在收到我添加XSRF token 的请求时，有一个preflight 请求，即使我正确提供了我的凭据，此请求也不包含Basic Auth header：

现在，如果我从拦截器中删除添加 XSRF token 的部分，那么在我提供凭据后身份验证请求就可以正常工作。当然它不需要XSRF token，因为它是一个GET 请求，但是将来我需要在POST API 调用中同时使用Basic Auth 和anti-CSRF 保护，所以必须能够使两者都起作用。有什么想法吗？

【问题讨论】：

我认为您的服务器上没有启用 CORS 配置。该问题与Anti-CSRF没有直接关系，而是因为OPTIONS请求没有服务器端处理
它不是 CORS。我正在使用 Spring Boot 处理它。如果我禁用基本身份验证，我将让所有请求（GET 和 POST）与每个请求的预检 OPTIONS 请求一起正常工作。如果您考虑一下，我的 OPTIONS 请求不应该在其标头中包含基本的身份验证凭据吗？我相信这是这里的问题。如果你愿意，我可以分享服务器端配置的代码。
这可能是由于您服务器端的 CORS 配置。看起来您的 API 需要 OPTIONS 请求的凭据。但是，这些请求是由浏览器触发的，您无法修改它们以添加自定义标头，就像您在屏幕截图中看到的那样......所以您的服务器返回 401。修改您的 CORS 配置服务器端，以便 @987654346 不需要身份验证@请求
大卫，你的回答奏效了。您可以将其发布为获得赏金的答案。

标签： angular basic-authentication x-xsrf-token

【解决方案1】：

根据我的评论：

这是由于服务器端的CORS 配置造成的。看起来 API 需要 OPTIONS 请求的凭据。但是，这些请求是由浏览器触发的，您无法修改它们以添加自定义标头，就像您在屏幕截图中看到的那样......所以您的服务器返回 401。

解决方案是修改CORS配置服务器端，使OPTIONS请求不需要认证

【讨论】：