如何解决在Vue中使用Axios发布到Zapier Hook会导致CORS错误
当我尝试将表单发布到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="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).
解决方法
您可以使用transformRequest的{{1}}属性删除axios标头。下面的代码段删除了axios发布请求中的所有标头，并允许您向Zapier发送Content-Type请求。
post我改用第三方表单服务（FlexyForm）处理我的表单提交。
这样，我避免了必须做的任何事情，并且表单更整洁。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。