I’m trying to send data from my web application directly to a Zapier webhook using JavaScript AJAX calls, but I keep running into CORS issues.
Every time I attempt to make the request, I get this error message:
XMLHttpRequest cannot load https://hooks.zapier.com/hooks/catch/...
The request was redirected to 'https://hooks.zapier.com/hooks/catch/.../'
which is disallowed for cross-origin requests that require preflight
Has anyone successfully made browser-based requests to Zapier webhook URLs? I’m wondering if there’s a workaround for this CORS restriction or if I need to handle this differently from the frontend.
Had the exact same issue building a client dashboard with Zapier workflows. Zapier blocks CORS requests on purpose for security - super annoying but makes sense. I fixed it using Netlify Functions as middleware (any serverless platform works). Created a simple function that takes POST requests from my frontend, validates the data, then forwards everything to Zapier’s webhook. What’s nice is you control what data gets sent and can add auth or rate limiting later. The function’s just a few lines that proxy the request, but it totally solves the CORS headache since the webhook call comes from your server instead of the browser.
Nope, you can’t call Zapier webhooks directly from browser JavaScript because of their CORS policy. Zapier blocks cross-origin requests on purpose - webhooks are meant for server-side apps, not browsers. I ran into this exact problem last year with a contact form. The fix is pretty simple: create a proxy endpoint on your server. Your frontend sends the AJAX request to your endpoint, then your server forwards it to Zapier. Since the webhook call comes from your server instead of the browser, CORS isn’t an issue. Just needs a basic HTTP POST from your backend to Zapier.
yeah, zapier webhooks r super annoying client-side! faced the same problem. i used vercel serverless functions - so easy! just create a function to take the form data n send it to zapier. no more cors issues!