In my Angular 7 project I'm attempting to upload an image file along with other form data to an Apache PHP backend. Using the HttpClient to make the request, POSTing just an image by itself works fine.
// 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);
}
The POST request is never made due to it failing the OPTIONS preflight, in which the server complains that the image file is missing from the request data.
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
I have tried settings headers manually to Content-Type: multipart/form-data and Content-Type: application/x-www-form-urlencoded and neither have worked.
I have tried using UrlSearchParams and HttpParams instead of FormData, both of which also gave me no luck.
When the request is made in Postman, it works fine.
