Multipart POST 适用于 Postman，但不适用于 Angular Http Client

Posted 2023-02-27

【中文标题】Multipart POST 适用于 Postman，但不适用于 Angular Http Client

【英文标题】：Multipart POST works from Postman but not from Angular Http Client

【发布时间】：2021-04-27 12:40:08

【问题描述】：

我正在尝试上传类似于谷歌地图的评论，其中附有一些内容和可选图片。

我首先在 Postman 中尝试过，它似乎工作得很好，但是我在 Angular 中发送相同的请求时遇到了很多麻烦。

这是邮递员请求（它具有 Content-Type 的默认标头：multipart/form-data）：

这是尝试使用表单数据发出相同请求的角度服务：

  addMultipart(review: Review, files: FileList): Observable<Review> 
    const formData = new FormData();
    for (let i = 0; i < files?.length || 0; i++)
      formData.append('files', files[i]);

    formData.append('review', JSON.stringify(review));

    let opts = 
      headers: new HttpHeaders(
        // 'Content-Type': 'multipart/form-data
        'Content-Type': 'application/json',
        'Accept': '*/*',
      ),
    ;

    return this.http
      .post<Review>(this.url, formData, opts)
      .pipe(catchError(this.handleError<Review>()));
  

现在，如果请求 content-type 是 application/json 就像上面的代码一样， 我收到一个错误提示 Required String parameter 'review' is not present，即使 有效负载包含名称为review 的表单数据

如果我像在 Postman 中一样将 content-type 设置为 multipart/form-data，我会收到 CORS 错误：

老实说，我对导致此错误的原因一无所知，因此非常感谢您的帮助！ :D

【问题讨论】：

你需要在你的服务器中设置 cors 策略

事实证明，完全删除 Content-Type 标头似乎可行。

【参考方案1】：

在开发环境中修复 CORS 错误：您可以安装 Allow-Control-Allow-Origin 插件 您可以做出的最快修复是安装 moesif CORS 扩展。安装后，单击它安装 Allow-Control-Allow-Origin 插件 您可以做出的最快修复是安装 moesif CORS 扩展。安装后，在浏览器中单击它以激活扩展程序。确保图标的标签从“关闭”：您的浏览器激活扩展。确保图标的标签从“关闭”开始：

在生产环境中解决这个问题：this is good article