在 HTTP 拦截器中设置自定义标头以及 URL 更改答案

【问题标题】：Set a Custom Header in the HTTP Interceptor along with a URL change在 HTTP 拦截器中设置自定义标头以及 URL 更改
【发布时间】：2018-08-07 17:21:49
【问题描述】：

当我尝试添加自定义标头以及 URL 更改（基于环境）时，我的自定义标头不会作为请求标头的一部分附加。

以下是我的 HTTP 拦截器代码（Angular 5）：

import { Injectable } from '@angular/core';
        import {
          HttpRequest,
          HttpHandler,
          HttpEvent,
          HttpInterceptor
        } from '@angular/common/http';
        import { AuthService } from './auth/auth.service';
        import { Observable } from 'rxjs/Observable';
        @Injectable()
        export class TokenInterceptor implements HttpInterceptor {
          constructor(public auth: AuthService) {}
          intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
             let url = this.environment.api + request.url;
            request = request.clone({
              url: url,
              setHeaders: {
                Authorization: Bearer ${this.auth.getToken()}
              }
            });
            return next.handle(request);
          }
        }

在上面的代码中，如果我删除请求克隆时的 URL，我可以看到我的自定义标头作为请求标头的一部分。如果我将 URL 放入 request.clone 方法中，我的自定义标头将不再添加到请求标头中。它添加了一个 Access-control-Request-Header: authorization 值。有人可以帮我解决这个问题吗？

编辑我们是否需要在服务器端做任何事情来公开这个自定义标头。如果它在同一个源头上，如果它是不同的源头，则附加它不附加

【问题讨论】：

httpInterceptor - 此链接可能对您有所帮助。
你想在哪里查看标题？我确信这是可能的，我已经做到了。
你能试试更新的解决方案吗？
更新的解决方案是我的实际实现。我发现问题检查我的答案

标签： javascript angular angular5

【解决方案1】：

我发现了问题，问题出在服务器端。当您点击在不同来源运行的服务时，我们需要在服务器端安全地设置自定义标头名称 cors 标头列表。现在在服务器端更新列表后，我可以看到请求中的标头。

【讨论】：