Angular 5 Header 值未正确附加 [重复]答案

【问题标题】：Angular 5 Header value is not append correctly [duplicate]Angular 5 Header 值未正确附加 [重复]
【发布时间】：2019-08-22 06:42:24
【问题描述】：

我在角度服务请求中附加标头，但值未正确附加，我创建了一个拦截器来添加如下标头

@Injectable()
export class AddHeaderInterceptor implements HttpInterceptor {
  constructor() {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {


    // Clone the request to add the new header
    const clonedRequest = req.clone({ headers: req.headers.set('tenantId', 'r 123') });

    // Pass the cloned request instead of the original request to the next handle
    return next.handle(clonedRequest);
  }
}

当我向服务器发送未正确附加的值时，如下图所示，未附加值“r 123”，我该如何解决？

headers image

【问题讨论】：

你能先确认你的拦截器被调用了吗？如果被调用，则尝试删除 r 和数字之间的空格 'r 123'，然后尝试
req.clone({ headers: req.headers.set('tenantId', 'r 123') }) 也是正确的
请求是CORS pre-flight OPTIONS request。服务器需要使用适当的CORS 标头进行响应。
@georgeawg 是的，它是预检请求我该如何解决这个问题

标签： java angular spring cors

【解决方案1】：

你是否在app.module.ts 中添加了AddHeaderInterceptor。

// ...
providers: [
    // ...
    { provide: HTTP_INTERCEPTORS, useClass: AddHeaderInterceptor, multi: true },
    //...
]

【讨论】：

我已经添加了这个，但它不起作用

【解决方案2】：

你可以试试这些

const httpOptions = {
  headers: new HttpHeaders({
  'header1':  'test',
  'header2': 'test',
 })
};
req.clone({ headers: httpOptions) });

【讨论】：

感谢您的回答，仍然出现同样的错误。
你遇到了什么错误？
兄弟，header 不显示选项方法（这些方法是 preflight request ）当这些请求成功然后再次点击另一个请求 get 或 post yiu 可以检查这些请求中的 header
你能把预检请求的例子发给我吗，如何处理？
后端服务器设置接受所有类型请求的CORS源头。

【解决方案3】：

试试这个 Angular 5，这可能有效，

    const clonedRequest = req.clone({
        setHeaders: { 'tenantId', 'r 123'}  
    });

【讨论】：

我改了，还是一样的问题。
好的，您是否首先检查了您的拦截器方法是否被调用？尝试将 console.log('something') 放入拦截器方法并确认。
是的，它正在打印，但仍然没有附加值，我也删除了字符串中的空格。