更改 Angular 6 中某些请求的 Content-Type答案

【问题标题】：Change Content-Type for certain requests in Angular 6更改 Angular 6 中某些请求的 Content-Type
【发布时间】：2023-04-05 03:51:01
【问题描述】：

我有一个 Angular 6 应用程序，它对 Node/Express 服务器进行 API 调用。我正在使用 HTTP 拦截器来添加应用程序需要的几个标头，并将“Content-Type”设置为“application/json”，因为所有请求都需要 JSON 数据。新标题如下所示：

newHeader = {
    withCredentials : true,
    headers: new HttpHeaders ({
      'Content-Type':  'application/json',
      'X_TOKEN_AUTH': authToken,
      'X_IDUSER': user_id
    })
  };

但现在我需要将图像上传到后端，因此服务器的其中一条路由必须预期非 JSON 数据进入正文。

我想做的是：

*在 Angular 应用程序中，将正确的标头添加到 POST 请求中，如下所示：

const url = `${SERVER_URL}/fileupload`;
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/x-www-form-urlencoded'
  })
};

return this.httpClient.post(url, formData, httpOptions)

*在 HTTP 拦截器中，检查请求是否具有“Content-Type”标头。在这种情况下，请使用它而不是默认的 'application/json'。在拦截器中，我记录了它收到的请求中的标头：

intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  [....]

  console.log('HTTP REQ:', req.headers);
}

这就是它打印的内容：

如您所见，与标题无关。有什么问题？

提前致谢，

【问题讨论】：

试试 req.headers.has('Content-Type')
是的，成功了，谢谢！

标签： angular angular-httpclient

【解决方案1】：

按照 Eliseo 的建议，这就是我所做的：

let contentType = 'application/json';

// Check if the incoming request has an specific content type in the header
if (req.headers.has('Content-Type'))
  contentType = req.headers.get('Content-Type');

现在我可以使用contentType 为上传路由设置正确的标头。

【讨论】：

你可以只检查if (!req.headers.has('Content-Type')，只有在标题中没有Content-Type时，附加它。