Question

我正在使用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问题？

Answer 1

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

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

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

const app = express();

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

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

1 个答案: