0

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

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.

preflight在接收我添加的请求时有一个请求，即使我正确地提供了我的凭据XSRF token，这个请求也不持有：Basic Auth header

预检请求第 1 部分 预检请求第 2 部分

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

4

1 回答 1

1

根据我的评论：

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

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

于 2021-06-11T07:25:13.813 回答