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

It turns out that removing the Content-Type header altogether seems to work. — 95xxxtent
– 95xxxtent, Commented Jan 23, 2021 at 4:51
Thanks @95xxxtent. The tip has really helped. As far as I see this, the multipart form data content type header with boundary is added by the angular http client automatically. So if we set the content type explicitly, it breaks the boundary addition. So just removing the Content-Type header for the upload endpoint fixed the problem. — S.T.Kannan
– S.T.Kannan, Commented Jun 27, 2023 at 3:21

Alireza · Accepted Answer · 2021-01-23 04:14:11Z

2

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

answered Jan 23, 2021 at 4:14

Alireza

5501 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multipart POST works from Postman but not from Angular Http Client

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related