Skip to main content

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