Angular 拦截器请求因 strict-origin-when-cross-origin 而失败

Question

我正在尝试使用拦截器在我的 Angular 应用程序中实现访问令牌处理。

在 Spring 后端，我将一些路由设置为 public（例如 localhost:8080/api/public/hello），有些路由只能使用访问令牌访问（例如 localhost:8080/api/hello).我还通过 overriding the WebMvcConfigurer.

禁用了 CORS 支持

如果组件正在调用 public API，拦截器工作正常，添加了授权 header，但显然它不需要加载页面，但它已正确设置并且似乎工作正常。

但是，如果我要调用 non-public API，拦截器将无法工作：将调用两个请求，第一个包含授权 header 但它不起作用，另一个没有 header，并且未达到。详情如下图所示。

Working call seen on Network on public API
First failing hello call when calling non-public API
Second unreachable hello call when calling non-public API

我的拦截器代码只是克隆请求参数并设置 headers，API 调用是组件中非常简单的一行。添加了相关的导入，模块、提供者应该是正确的（public API 有效，所以拦截器本身应该没问题）。

拦截器(token-interceptor.service.ts):

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  const authReq = req.clone({
    setHeaders: {
      Authorization: this.getAccessToken()
    }
  });
  return next.handle(authReq);
}

组件(home.component.ts): (.helloPublic和.hello是方法名)

ngOnInit(): void {
  this.helloApi.helloPublic().subscribe((response: HelloDto) => {
    this.hello = response;
  });
}

Answer 1

发现问题，我的自定义 WebSecurityConfigurerAdapter 的 configure(HttpSecurity http) 方法中缺少 http.cors()：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors();
        // (...)
    }

    // (...)
}

Angular 拦截器请求因 strict-origin-when-cross-origin 而失败

Angular interceptor request failed because of strict-origin-when-cross-origin

token

interceptor

typescript

angular

referrer-policy