拦截器从请求中删除标头答案

【问题标题】：interceptor delete headers from request拦截器从请求中删除标头
【发布时间】：2020-09-08 03:53:32
【问题描述】：

    @Injectable()
export class TokenInterceptorService implements HttpInterceptor {

  constructor(private injector: Injector) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', "dassda")
    });
    console.log(authReq);
    return next.handle(authReq);
  }
}

互联网上的任何教程都使用此代码在请求中添加授权标头，在我的情况下，如果我设置标头，则所有其他标头都将被删除。

错误：“CORS 策略已阻止从源 '' 访问 XMLHttpRequest：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow- Origin' 标头出现在请求的资源上”。

但如果我删除行 headers: req.headers.set('Authorization', "dassda") 总是可以的

console.log(req.headers) 返回 map(0)

我正在尝试：

硬编码所有标头 - 任何地方的错误

尝试使用 req.headers 中的所有方法，例如 append、setHeaders、Headers

附加标题，如“Access-Control-Allow-Origin/headers/methods”等 -创建新标题，

下载谷歌插件 Moesif Origin & CORS Changer 该程序将所有需要的标头添加到所有请求-然后写入错误“已被阻止根据 CORS 政策：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。”

【问题讨论】：

尝试 req = req.clone({ headers: req.headers.set('Authorization', "dassda") });而不是使用 const 使用 req 对象

标签： javascript angular typescript

【解决方案1】：

你可以这样使用，它是在克隆过程中添加新标题的快捷方式。

request = request.clone({
  setHeaders: {
    Authorization: `Bearer ${token}`
  },
});

https://stackoverflow.com/a/45221680/2681943

【讨论】：

正在尝试这个
@Vlad，我在本地代码上尝试了同样的方法，setHeaders 将新标头附加到请求中，并保留旧标头。你能创建一个 stackblitz 并分享它吗？

【解决方案2】：

问题出在我的后端（Java）上，我将此代码粘贴到我的配置方法中，一切正常。

@Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "DELETE", "PUT"));
        configuration.setAllowedHeaders(Collections.singletonList("*"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

【讨论】：