Is there a way of triggering Zapier webhooks from client-side applications?

I can't seem to make successful AJAX requests and always get:

XMLHttpRequest cannot load /..... 
The request was redirected to '/..../', 
which is disallowed for cross-origin requests that require preflight. 

Is there a way of triggering Zapier webhooks from client-side applications?

I can't seem to make successful AJAX requests and always get:

XMLHttpRequest cannot load https://zapier.com/hooks/catch/..... 
The request was redirected to 'https://zapier.com/hooks/catch/..../', 
which is disallowed for cross-origin requests that require preflight. 

• javascript
• ajax
• zapier

6 Answers 6

You must not modify the Content-Type header

https://zapier.com/help/create/code-webhooks/troubleshoot-webhooks-in-zapier#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error

As of January 15th, 2016, Zapier does not support catching a webhook using a POST request from a browser (due to CORS headers required for the browser's preflight request).

A GET request with query string values will work though.

Zapier does not support CORS. The way I got this to work was to use an image.

var newImage = new Image();
newImage.src = "https://zapier.com/hooks/catch/myhook?param=one";

or

<img height="0" width="0" src="https://zapier.com/hooks/catch/myhook?param=one">

This works for me:

  try {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "https://zapier.com/hooks/catch/myhook");
    xhr.send(JSON.stringify({data: "example"}));
    console.log("Pushed to Zapier successfully!");
  } catch(e) {
    console.error(e);
  }

Using a Fetch request without setting the Content-Type also works,

const response = await fetch(
`https://hooks.zapier.com/hooks/catch/${code}/${code}`,
    {
  method: 'POST',
  body: JSON.stringify(payload)
    }

Zapier's awesome support team fixed CORS issue in under 24 hours!

Kudos Zapier!