Блог

Главная - Вопросы по программированию - Как мне отправить данные из формы vuejs в zapier webhook с помощью axios?

Как мне отправить данные из формы vuejs в zapier webhook с помощью axios?

#javascript #vue.js #axios #webhooks #zapier

#javascript #vue.js #axios #webhooks #zapier

Вопрос:

Я использую vuejs / axios и хочу отправить данные в zapier webhook.

Я перепробовал несколько способов. Однако я постоянно получаю следующую ошибку:

Доступ к XMLHttpRequest по адресу ‘https://hooks.zapier.com/hooks/catch/7349379/owviy9 /’ из источника ‘http://localhost:8080 ‘ был заблокирован политикой CORS: тип содержимого поля заголовка запроса не разрешен с помощью 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?

Комментарии:

1. Вероятно, вы запускаете свое приложение локально, и на самом деле ваш браузер блокирует выполнение запроса. Вы могли бы обслуживать свое приложение через небольшой веб-сервер (node и express) И отправьте запрос axios post на ваш собственный сервер, а оттуда отправьте ваш запрос в zapier. Не знаю, имеет ли это какой-либо смысл для вас, но это самое долговременное решение, которое я могу придумать.

Ответ №1:

Из вашего первого примера просто удалите:

 {headers: {"Accept": "application/json"}}

Zapier не разрешает отправлять заголовки.

Полный пример:

 const res = await this.$axios.post('https://hooks.zapier.com/hooks/catch/xxx/xxx/',
    JSON.stringify(data)
  )

Ответ №2:

Когда вы пытаетесь отправлять запросы с одного компьютера, но с разных портов. Пример: ваш интерфейс работает на порту 3000, в то время как ваше приложение nodejs работает на порту 8080. По соображениям безопасности браузер не позволяет вам отправлять запросы api.

Решение: добавьте Cors в ваше приложение NodeJS.

  1. npm install cors
  2. const cors = require('cors')

const app = express();

  1. просто добавьте строку ниже этого: app.use(cors()); // используйте его как промежуточное программное обеспечение, и это решит вашу проблему.