typescript - Multipart POST works from Postman but not from Angular Http Client

Question

I'm trying to upload a google maps-like review that has some content and optional images attached to it.

I've tried it first in Postman and it seems to work great, however I'm having a lot of trouble sending the same request in Angular.

This is the postman request (it has default Headers with Content-Type: multipart/form-data):

And this is the angular service that tries to make the same request with 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>()));
  }

Now, if the request content-type is application/json like in the code above, I get an error that says Required String parameter 'review' is not present, even though the payload contains form-data with name review

And if I set content-type to multipart/form-data like in Postman, I get the CORS error:

I'm honestly pretty clueless about what's causing this error so any help is greatly appreciated! :D

Answer 1

to fix CORS error in develop environment : you can install the Allow-Control-Allow-Origin plugin The quickest fix you can make is to install the moesif CORS extension . Once installed, click it install the Allow-Control-Allow-Origin plugin The quickest fix you can make is to install the moesif CORS extension . Once installed, click it in your browser to activate the extension. Make sure the icon’s label goes from “off”: your browser to activate the extension. Make sure the icon’s label goes from “off”:

to fix that in production environment : this is good article