在Vue中使用Axios发布到Zapier Hook会导致CORS错误

编程问答 2022-08-14

问题描述

当我尝试将表单发布到Zapier Webook端点时，表单提交给我一个CORS错误。

这是我创建的表单：

<form @submit.prevent="submitForm()" class="flex flex-col gap-4 mb-8">
    <input class="forminput" type="text" name="name" id="name" v-model="name" placeholder="name" required>
    <input class="forminput" type="email" name="email" id="email" v-model="email" placeholder="[email protected]" required>
    <input class="forminput" type="text" name="submissionTitle" id="submissionTitle" v-model="submissionTitle" placeholder="submission title" required>
    <input class="forminput" type="text" name="submissionLink" id="submissionLink" v-model="submissionLink" placeholder="submission link" required>
    <textarea class="forminput text-left" name="message" id="message" v-model="message" rows="3" placeholder="your message..."></textarea>
    <input class="forminput" type="text" name="instagram" id="instagram" v-model="instagram" placeholder="@instagram">
    <input class="forminput" type="text" name="twitter" id="twitter" v-model="twitter" 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="submit">
</form>

这是处理表单提交的逻辑。我在这里尝试了几种不同的选项和代码段，但它们都显示了404响应或CORS错误。

<script>
import axios from 'axios';

export default {
    name: 'SubmitPage',title: 'Submit Music',data () {
        return {
            name: '',email: '',submissionTitle: '',submissionLink: '',message: '',instagram: '',twitter: '',}
    },methods: {
        submitForm: function () {
            axios.post('hooks.zapier.com/hooks/catch/MYHOOK',{
                name: this.name,email: this.email,submissionTitle: this.submissionTitle,submissionLink: this.submissionLink,message: this.message,instagram: this.instagram,twitter: this.twitter,})
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });

            alert('Thanks for your submission.');
        }
    }
}
</script>

最后是错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://hooks.zapier.com/hooks/catch/MYHOOK/. (Reason: header ‘content-type’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

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

解决方法

您可以使用transformRequest的{​​{1}}属性删除axios标头。下面的代码段删除了axios发布请求中的所有标头，并允许您向Zapier发送Content-Type请求。

post
,

我改用第三方表单服务（FlexyForm）处理我的表单提交。

这样，我避免了必须做的任何事情，并且表单更整洁。

axioscorscorsformssubmitvue.js