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

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 header content-type ，所以完全不需要手动设置。 如果内容类型标头是浏览器开发工具中的application/json ，则意味着请求正文已更改，直到 angular 尝试定义标头。 这种变化很可能发生在拦截器中。 因此，如果您有一个拦截器，可以对请求进行操作，那么问题可能就在此时。

Answer 2

正如 Hikmat G. 指出的那样，问题很可能源于 Http 拦截器，就我而言，我发现在我用来注入 JWT 令牌的授权拦截器中，将内容类型设置为application/json ，如图所示以下 ：

    return req.clone({
        setHeaders: {
        'Content-Type' :  'application/json',
        'Accept': 'application/json',
        'Authorization': `Bearer ${ token }`,
        },
    });

我确实需要那样做，除了某个请求，我将文件作为 formdata 对象的一部分发送，其中内容类型必须是multipart/form-data ，它会自动更改为 json，所以我添加了在避免该问题的情况下，它似乎有效：

        let json_blacklist = "/example/url";
        let reqHeaders = {
            setHeaders: {
            'Content-Type' :  'application/json',
            'Accept': 'application/json',
            'Authorization': `Bearer ${ token }`,
            },
        };

        if(req.url.includes(json_blacklist)) {
            delete reqHeaders.setHeaders["Content-Type"];
        }

        return req.clone(reqHeaders);

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