首页 > 解决方案 > 拦截器从请求中删除标头

问题描述

    @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);
  }
}

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

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

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

console.log(req.headers)返回地图(0)

我正在努力:

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

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

  • 附加标头,例如“Access-Control-Allow-Origin/headers/methods”等 - 创建新标头,

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

标签: javascriptangulartypescript

解决方案


问题出在我的后端(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;
    }

推荐阅读