Vue.js CORS issue when posting form data to a Zapier webhook using axios

Other Questions Zapier
1

I am currently working with Vue.js and axios to submit form data to a Zapier webhook. Unfortunately, I encounter issues with CORS every time I attempt to send the request.

The error I receive states:

Access to XMLHttpRequest at ‘https://hooks.zapier.com/hooks/catch/1234567/abc123/’ from origin ‘http://localhost:3000’ has been blocked by the CORS policy: The request header content-type is not allowed by the Access-Control-Allow-Headers in the preflight response.

Here’s the code I’m using:

submitData() {
  axios
    .post(
      'https://hooks.zapier.com/hooks/catch/1234567/abc123/',
      this.formDetails,
      { headers: {"Accept": "application/json"} }
    )
    .then(function(response) {
      console.log(response);
    });
}

I also tried this alternative method, but it didn’t resolve the issue:

var formInput = this.formDetails;
axios.create({ transformRequest: [(formInput, _headers) => JSON.stringify(formInput)] })
 .post('https://hooks.zapier.com/hooks/catch/1234567/abc123/', formInput);

What steps can I take to fix the CORS problem when submitting data to Zapier webhooks?

2

Had this exact problem six months ago. I switched approaches completely - stopped fighting CORS and used a simple fetch with no-cors mode instead. You won’t get response data back, but that’s usually fine for webhook submissions since you’re just sending data to Zapier. Something like fetch(url, { method: 'POST', mode: 'no-cors', body: JSON.stringify(formData) }). The request goes through even though you can’t read the response. Works great for webhook integrations where you just need to trigger the Zapier workflow.

3

The content-type header is what’s causing your preflight issue. Axios triggers a CORS preflight request with certain content types, and Zapier webhooks can’t handle it properly. I ran into the same thing and fixed it by setting content-type to ‘application/x-www-form-urlencoded’ or ‘text/plain’ - this skips the preflight completely. You could also use URLSearchParams to format your data instead of sending JSON. Or just set up a simple backend proxy that forwards requests to Zapier - that’s what I ended up doing to avoid browser CORS restrictions entirely.

4

i faced this too. try just removing those headers entirely, zapier mostly needs the defaults. just send your form data as it is and see if the error still pops up.