Angular HttpClient- 带有 FormData 的 POST 文件

Question

在我的 Angular 7 项目中，我尝试将图像文件与其他表单数据一起上传到 Apache PHP 后端。使用 HttpClient 发出请求，仅发布图像本身就可以正常工作。

// This works fine
uploadAvatar(payload: any): Observable<any> {
    const formData = new FormData();
    formData.set('avatar', payload.avatar);
    return this.http.post(`${api_url}/user/avatar`, formData)
}

// This does not
create(payload: any): Observable<any>{
    const formData = new FormData();
    formData.set('title', payload.title);
    formData.set('image', payload.image);
    return this.http.post(`${api_url}/path/to/add`, formData);
}

由于 OPTIONS 预检失败，因此永远不会发出 POST 请求，其中服务器抱怨请求数据中缺少图像文件。

Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我已尝试手动将标题设置为Content-Type: multipart/form-data 和Content-Type: application/x-www-form-urlencoded，但均未成功。

我曾尝试使用UrlSearchParams 和HttpParams 而不是FormData，这两种方法都没有让我走运。

当在 Postman 中发出请求时，它工作正常。

Answer 1

1) 我同意最初的回答，这听起来像是“/path/to/add”端点的 CORS 问题，所以我肯定会先检查后端，看看这两个端点与 CORS 实现有什么区别。作为 CORS 调试的一部分，我将在浏览器控制台的网络选项卡中查看失败的请求/响应，以查看客户端发送了哪些标头。您的项目可能已经添加了 HttpHeaders（例如，一些项目实现了一个 HttpInterceptor 来将 HttpHeaders 添加到所有请求中），了解给定请求的实际发送内容很重要。

2）我很好奇您为什么添加“服务器抱怨请求数据中缺少图像文件。”..您是否在客户端或服务器端日志中看到特定错误？分享这可能暗示了一个额外的原因。

3) 此处的类似帖子建议尝试不使用“多部分/表单数据”标题..值得一试：Upload image with HttpClient

Answer 2

当您从 Postman 发出请求时，不涉及 CORS - 浏览器实现了 CORS 协议，而 Postman 没有。

所以，我猜测 PHP 应用程序设置处理该特定 URL 的方式有问题 - 它显然没有正确响应浏览器发送的用于飞行前检查的 OPTIONS 请求（并且邮递员不发送）。

您没有显示完整的错误消息，但似乎 PHP 应用正在使用 404 或其他一些非 200 系列响应代码响应 OPTIONS 请求。