I’m trying to send data from my web app directly to a Zapier webhook URL using JavaScript fetch requests. However, I keep running into cross-origin issues and can’t get it working.
Every time I attempt the request, I get this error message:
Fetch API cannot access https://hooks.zapier.com/hooks/catch/12345/abcdef
Request was redirected to 'https://hooks.zapier.com/hooks/catch/12345/abcdef/',
which violates CORS policy for preflighted requests.
Is it actually possible to make these webhook calls from browser JavaScript, or do I need to route everything through my backend server instead? Any workarounds or alternative approaches would be helpful.
yeah, zapier webhooks rly dont play nice with CORS from the browser. I’ve dealt with this issue too, just set up a little proxy on your backend to send requests to zapier. super quick fix and totally worth it.
Zapier webhooks don’t support CORS for direct browser requests - that’s why you’re getting the redirect violation error. I hit this exact issue building a customer feedback system and had to ditch the client-side approach completely. Zapier’s automatic HTTP to HTTPS redirect triggers CORS preflight restrictions that browsers block. Just route it through your backend instead - I created a simple POST endpoint that takes the form data and forwards it to Zapier. Takes 10 minutes to set up and beats spending hours fighting browser security policies.
Yeah, this is super common with Zapier webhooks. Zapier’s redirect handling gets blocked by browsers during CORS checks - ran into this exact issue building a contact form last year. Easiest fix is setting up a simple server endpoint that sits between your frontend and Zapier. You could also try Zapier’s newer webhook setups or switch to Make.com, which handles CORS way better for direct browser calls. There’s also the old hidden form trick instead of fetch, but it feels outdated and has its own issues.