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

Question

当我尝试 post 将表单提交到 Zapier Webbook 端点时，我的表单提交出现 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="you@who.com" 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).

Answer 1

您可以使用 axios 的 transformRequest 属性删除 Content-Type header。下面的代码片段从 axios post 请求中删除了所有 headers，并允许您向 Zapier 发送 post 请求。

axios.create({ transformRequest: [(data, _headers) => JSON.stringify(data)] })
     .post()

Answer 2

我使用第三方表单服务 (FlexyForm) 来处理我的表单提交。

这样我就避免了处理任何事情，而且我的表格也更干净了。

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

Posting to Zapier Hook with Axios in Vue causes CORS error

forms

vue.js

axios

cors

submit