How to POST in Angular2 without setting content-type (or how to post to Zapier Webhook)

Question

I am trying to POST to a zapier webhook. I can do this without issue in Postman.

But when trying to do the same from Angular 2 I get the following error back from Zapier.

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response

Their docs say not to set the Content-Type header, however I've not yet worked out how to send a request without it. https://zapier.com/help/common-problems-webhooks/

My most recent attempt is below.

let body = { email: 'an@email.com', name :'Mr Test'};
let bodyString = JSON.stringify(body); // Stringify payload
let headers    = new Headers({ 'Content-Type': undefined }); 
let options    = new RequestOptions({ headers: headers }); // Create a request option

let request = this.http.post(`https://hooks.zapier.com/hooks/catch`, body, options) 
                 .map((res:Response) => res.json()) 
                 .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

                 request.subscribe((resp) => {
                     console.log(resp);
                 });

I've also tried

 let headers = new Headers();

And

 let options = new RequestOptions();

Angular 2.2.0

Answer 1

Have you tried by setting application/x-www-form-urlencoded content type to your Headers :

let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
let options = new RequestOptions({ headers: headers });

Answer 2

hey you can try withCredential set to true which can handle cross site access control requests

 let headers = new Headers();
 headers.append('Content-Type', 'application/x-www-form-urlencoded');
 let options = new RequestOptions({ headers: headers, withCredentials: true });