Hi, so im building a custom crypto widget for my website to use with my own social token and having issues with sending data to zapier from successful transactions. Im not really much of a dev so im using chatgpt to do all the heavy lifting!
This is the part of my widget code that is supposed to send the data (email and transaction) to the zap
const data = {
transaction: transaction,
email: emailInput.value
};
// Send the transaction data to your Zapier webhook
fetch('https://hooks.zapier.com/hooks/catch/3372361/36orspi/', {
method: 'POST',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' },
});
The issue im getting is that the webhook zap in ‘catch hook’ i only get ‘querystring’.. when set to ‘catch raw hook’, i get a bunch of data but none that i need. So after chatting about fixing the formatting of the code, it told me to check console for errors and i did. this is what it gave me:
Access to fetch at 'https://hooks.zapier.com/hooks/catch/3372361/36orspi/' from origin 'https://www.poorstudio.us' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response. hooks.zapier.com/hooks/catch/3372361/36orspi/:1 Failed to load resource: net::ERR_FAILED freebies:664 Uncaught (in promise) TypeError: Failed to fetch at succeeded (freebies:664:13) at v10.js:175:330353 public.depay.com/transactions/polygon/0xA287C992Edcc454f3c1a4278b1b9149A991A7B12/123:1 Failed to load resource: the server responded with a status of 404 ()
i sent this error to chat and it said:
These errors are related to CORS (Cross-Origin Resource Sharing) policy. Browsers block requests to different origins (in this case, your website trying to send a request to Zapier) unless the server explicitly allows it. You cannot control the CORS headers on the Zapier webhook server.
To solve this issue, you can create a simple proxy server that will forward the request to the Zapier webhook, which adds the necessary CORS headers to the response. You can use cloud services like AWS Lambda, Google Cloud Functions, or even create a small Node.js app on a server.
it’s also given me a solution about adding a proxy server to get around the issue but was not a production ready solution as it sends data to a 3rd party and could be a security issue.. so that’s a no for me..
so as it is, im not sure which way to go and would love some pro zappers to share some insight! thanks! Let me know if you need any more info!