如何使用 axios 将数据从 vuejs 表单提交到 zapier webhook？

Posted 2023-03-24

【中文标题】如何使用 axios 将数据从 vuejs 表单提交到 zapier webhook？

【英文标题】：How do I Submit data from a vuejs form to zapier webhook using axios?

【发布时间】：2021-01-16 19:18:00

【问题描述】：

我正在使用 vuejs / axios，我想将数据发布到 zapier webhook。

我尝试了很多方法。但是我不断收到以下错误：

CORS 策略已阻止从源“http://localhost:8080”访问“https://hooks.zapier.com/hooks/catch/7349379/owviy9/”处的 XMLHttpRequest：请求标头字段内容-预检响应中的 Access-Control-Allow-Headers 不允许类型。

这是我的代码：

submit()       
  axios
    .post(
      'https://hooks.zapier.com/hooks/catch/7349379/owviy9j/',
      this.formData,
     headers: "Accept": "application/json"
    )
    .then(function(response) 
      console.log(response);
    );

我也试过这个，但似乎无法让它工作：

var data = this.formData
axios.create( transformRequest: [(data, _headers) => JSON.stringify(data)] )
 .post('https://hooks.zapier.com/hooks/catch/7349379/owviy9j/', data) 

如何解决这个 CORS 问题？

【问题讨论】：

您可能正在本地运行您的应用程序，实际上是您的浏览器阻止了您执行请求。您可以通过小型网络服务器（节点和快递）为您的应用程序提供服务，并将您的 axios 发布请求发送到您自己的服务器，然后从那里将您的请求转发给 zapier。不知道这对您是否有意义，但这是我能想到的最持久的解决方案。

【参考方案1】：

当您尝试从同一台机器但使用不同端口发出请求时。示例：您的前端在端口 3000 上运行，而您的 nodejs 应用程序在端口：8080 上运行。出于安全考虑，浏览器不允许您发出 api 请求。

解决方案：将 Cors 添加到您的 NodeJs 应用程序中。

npm install cors const cors = require('cors')

const app = express();

只需在下面添加一行：app.use(cors()); //将其用作中间件，这将解决您的问题。