Question

嗨，我在尝试获取httpClient补丁请求以发送内容类型为'multipart / form-data'的FormData时遇到麻烦。

我已经指定了标题，如下所示：

  private httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'multipart/form-data', 'Cache-Control': 'no-cache', 'Pragma': 'no-cache'
    })
  };

然后执行以下操作以保存到nodejs服务器：

const formData: FormData = new FormData();
formData.append('materialFile', 'something');
return this.httpClient.patch<any>(this.apiUrl  + loan.id, formData, this.httpOptions);

在我的Nodejs / Express服务器上，请执行以下操作：

const Multer  = require('multer');

router.patch('/:id', Multer().fields([{ name: "materialFile", maxCount: 1 }]), (req, res, next) => {
  console.log(req.files['materialFile']);
});

当我在浏览器上检查请求标头时，我看到内容类型是application / json。

有人知道为什么吗？

Answer 1

Angular尝试根据请求正文自动设置http标头content-type，因此绝对不需要手动设置它。如果浏览器的devtools中的内容类型标头为applicaiton/json，则表示请求主体已更改，直到angular尝试定义标头为止。这种变化很可能发生在拦截器中。因此，如果您有一个拦截器，可以对请求进行操作，则问题可能出在这里。

Answer 2

正如Hikmat G.所指出的那样，问题很可能源于Http拦截器，在我的情况下，我发现在我用来注入JWT令牌的授权拦截器中，将内容类型设置为{{ 1}}，如下所示：

application/json

而且我确实需要这种方式，除了某些要求，即我将文件作为formdata对象的一部分发送时，其中内容类型必须为return req.clone({ setHeaders: { 'Content-Type' : 'application/json', 'Accept': 'application/json', 'Authorization': `Bearer ${ token }`, }, });，它会自动更改为json，所以我添加了一个条件来避免该问题，并且它似乎正在起作用：

multipart/form-data

提示：对于要发送文件的请求，请不要将内容类型设置为multipart / form-data，只需完全删除内容类型，然后允许浏览器设置内容类型本身，这将有助于防止webkit边界错误，因为浏览器将自动设置边界，有关更多详细信息，请参见#40561738。

Angular 5'Content-Type'：'multipart / form-data'被重置为'application / json'

2 个答案: