在Angular的Http拦截器中,修改请求的头部可能会引发CORS(跨源资源共享)问题。这是因为跨域请求需要与服务器协商许可,且许可的响应头(Access-Control-Allow-Headers)是服务器控制的。
解决这个问题的一种方法是在服务器添加允许修改头部的响应头(Access-Control-Expose-Headers),然后在拦截器中设置相应的标头即可。以下是一些示例代码:
在服务器端(例如Node.js)添加以下响应头:
res.setHeader('Access-Control-Expose-Headers', 'X-Custom-Header');
在Angular的Http拦截器中,设置标头:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
@Injectable()
export class CustomHeaderInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler) {
const modifiedReq = req.clone({
headers: req.headers.set('X-Custom-Header', 'some-value')
});
return next.handle(modifiedReq);
}
}
需要注意的是,在修改头部时,应使用请求的原始Headers对象进行克隆,而不是创建一个新的Headers对象。这是因为新的Headers对象不会包含"Content-Type"等关键头部,可能导致其他问题。