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

【问题标题】：Multipart POST works from Postman but not from Angular Http ClientMultipart POST 适用于 Postman，但不适用于 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 标头似乎可行。

标签： angular typescript spring-boot http postman

【解决方案1】：

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

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

【讨论】：