Skip to main content

Get Support
Have a question? Let's get you an answer!

How Do I...? Troubleshooting Code & Webhooks Developer Zone

Other Help Resources
Wait, there's more! Check out these Community sourced spaces for additional resources.

Zapier Help Center Hire an Expert

Learning Resources
All of our best learning resources can be found here.

Featured Articles Show & Tell Zapier's products AI Hub Zapier Tools Hub

Share your knowledge
Give back to the Community by sharing your automation wins and helping to answer questions.

Share your success See unanswered questions User Groups

Other Learning Resources
Some of our favorite additional ways to upskill your Zapier knowledge.

Zapier Learn Zapier Blog Zapier Webinars

Product Updates
Check out what is new and upcoming with Zapier with our regular product updates.

Product Updates

Early Access Program
Want to join Early Access? Learn more here.

I have spent hours trying to create a really simple zap that should have taken just minutes to set up. Perhaps someone can offer some guidance.

I have a website landing page that a prospect accesses via a URL which carries UTM parameters. When they scroll 50% down the page a script is triggered which posts a message and UTM values to a zap webhook. The hook is processed, these values are added to a simple email which is then fired off. 

I see that the UTM parameters from the URL are accurately captured because the console log reports correct data:

Data sent to Zapier: {"message":"User scrolled 50% of the page","utm_source":"mp","utm_medium":"email","utm_campaign":"em1","utm_id":"xxxxx","utm_term":null,"utm_content":"xxxxx"}

But then few seconds later I see the CORS policy message:
Access to XMLHttpRequest at 'https://hooks.zapier.com/hooks/catch/my-hook-id' from origin 'https://xxxxxxx.com' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

My website CORS is set to “let’s the browser decide (default)”. I have tried changing to “explicitly allowed” but that made no difference.

I have explicitly allow Zapier via .htaccess: Header set Access-Control-Allow-Origin "https://zapier.com"

Any suggestions or guidance is appreciated.

Hi @mirphi 

Help links for using the Webhooks Zap app: https://zapier.com/apps/webhook/help

It may be related to how the API request is being made by the script.

Are you using GET or POST?

Sure enough, it was a simple code change that was key to fixing this. In case this is useful to anyone else, here are the details.

Network console issue I encountered:
Access to fetch at 'https://hooks.zapier.com/hooks/catch/my-hook-id/' from origin 'https://my-website.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Code fix issue I implemented. Note the ‘no-cors’ entry:

function sendToZapier(data) {

                console.log("Data prepared to be sent to Zapier:", JSON.stringify(data));

                fetch('https://hooks.zapier.com/hooks/catch/my-hook-id', {

                                method: 'POST',

                                headers: {

                                                'Content-Type': 'application/json'

                                },

                                body: JSON.stringify(data),

                                mode: 'no-cors'

                });

}

Reply


Terms & Conditions