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

Posted 2023-02-25

【中文标题】Angular 5 Header 值未正确附加 [重复]

【英文标题】：Angular 5 Header value is not append correctly [duplicate]

【发布时间】：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 是的，它是预检请求我该如何解决这个问题

【参考方案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') 放入拦截器方法并确认。

是的，它正在打印，但仍然没有附加值，我也删除了字符串中的空格。