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);
}

由于POST请求未通过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

从Postman发出请求时，不涉及CORS-浏览器实现CORS协议，而Postman不参与。

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

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

Answer 2

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

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

3）这里有类似的帖子建议尝试不使用“多部分/表单数据”标头。值得一试：Upload image with HttpClient

Angular HttpClient-带有FormData的POST文件

2 个答案: