CORS Issues When Sending Data to Zapier Webhook via Axios in Vue

Other Questions Zapier
1

I’m encountering a CORS issue while attempting to submit my form data to a Zapier Webhook endpoint. Below is the form I’ve implemented:

<form @submit.prevent="handleSubmit()" class="flex flex-col gap-4 mb-8">
    <input class="forminput" type="text" name="fullName" id="fullName" v-model="fullName" placeholder="Your Name" required>
    <input class="forminput" type="email" name="userEmail" id="userEmail" v-model="userEmail" placeholder="[email protected]" required>
    <input class="forminput" type="text" name="postTitle" id="postTitle" v-model="postTitle" placeholder="Post Title" required>
    <input class="forminput" type="text" name="postURL" id="postURL" v-model="postURL" placeholder="URL" required>
    <textarea class="forminput text-left" name="content" id="content" v-model="content" rows="3" placeholder="Your message..."></textarea>
    <input class="forminput" type="text" name="instagramHandle" id="instagramHandle" v-model="instagramHandle" placeholder="@instagram">
    <input class="forminput" type="text" name="twitterHandle" id="twitterHandle" v-model="twitterHandle" placeholder="@twitter">
    <input class="bg-purple-700 hover:bg-purple-600 p-1 w-1/4 m-auto font-black text-white rounded-sm shadow-md hover:shadow-lg" type="submit" value="Send">
</form>

This is the method I’m using to handle the form submission. I’ve tried various code snippets but keep getting either a 404 error or a CORS issue:

<script>
import axios from 'axios';

export default {
    name: 'FormPage',
    data () {
        return {
            fullName: '',
            userEmail: '',
            postTitle: '',
            postURL: '',
            content: '',
            instagramHandle: '',
            twitterHandle: '',
        }
    },
    methods: {
        handleSubmit: function () {
            axios.post('hooks.zapier.com/hooks/catch/YOURHOOK', {
                fullName: this.fullName,
                userEmail: this.userEmail,
                postTitle: this.postTitle,
                postURL: this.postURL,
                content: this.content,
                instagramHandle: this.instagramHandle,
                twitterHandle: this.twitterHandle,
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });

            alert('Submission received. Thank you!');
        }
    }
}
</script>

I also receive the following errors:

Cross-Origin Request Blocked: The Same Origin Policy prohibits accessing the remote resource at https://hooks.zapier.com/hooks/catch/YOURHOOK/. (Reason: "content-type" header is not allowed according to "Access-Control-Allow-Headers" in CORS preflight response).

Cross-Origin Request Blocked: The Same Origin Policy prohibits accessing the remote resource at https://hooks.zapier.com/hooks/catch/YOURHOOK/. (Reason: CORS request did not succeed).
2

Hey CharlieLion22! did you check if the URL in your axios is correct? You might be missing ‘https://’ before the hook’s URL in the axios post request. Also, sometimes using a proxy server can bypass CORS issues, but keep security implications in mind. Hope it helps!

3

I have faced similar CORS issues in the past. You can try using a browser extension for CORS temporarily for testing. These extensions can help you bypass the problem until you have a more permanent solution. However, for production environments, you should consider configuring the server to include the appropriate CORS headers or use a server-side proxy that handles requests between your front-end and Zapier. Additionally, make sure your API uses HTTPS, and you are handling errors properly to debug more efficiently.