@oleg_templ
турист автостопщик - по ночам веб разработчик.

Отправка данных в POST на vue + axios?

Начинаю изучать vue в связке с axios.
Задача,отправка на сервер данных в виде json обьекта (этот обьект формируеться при помощи v-model и большого количества инпутов) методом post( сервер принимает данные парсит их и т.д. - с ним все нормально,затык где то с axios).

axios https://github.com/axios/axios

Я не стал писать весь код целиком,вот мини версия.
<template>
<div>  
    <div>
      <!-- по нажатию кнопки данные уходят на сервер -->
        <button v-on:click="postPost"> Go!!</button>
    </div>
    <div>
        <!-- ошибки вылетают и радуют глаз -->
          <ul v-if="errors && errors.length">
        <li v-for="error of errors">
          {{error.message}}
        </li>
      </ul>
    </div>
</div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      postBody: {   // пример данных для отправки(позже они преобразуются в json)
        name : ' michail ',
        ade : 22
      },
      errors: []    // массив для записи ошибок
    }
  },

  // Pushes posts to the server when called.
  methods: {
  postPost : function () {

        axios.post(`http://localhost:8081`, {   

          body: this.postBody                            // судя из примеров body это тело запроса (axios преобразует автоматом в json формат)
        })
        .then(response => {})
        .catch(e => {
          this.errors.push(e)
        })
      }
    }
}
</script>


текст ошибки
Failed to load localhost:8081/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8080' is therefore not allowed access.
  • Вопрос задан
  • 38773 просмотра
Решения вопроса 2
lavezzi1
@lavezzi1
const str = JSON.stringify(this.postBody);
axios.post('http://localhost:8081/', str)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });


Ошибка то у вас какая?
Ответ написан
Если express или koa, то делайте как здесь:
app.use(async (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE");
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    next();
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@RyoidenshiAokigahara
Начинающий
За два года наверняка, конечно, разобрались. Но для тех кто заглянет — в тексте ошибки кроется ответ: в скрипте по указанному url нет заголовка Access-Control-Allow-Origin.
Для серверов на Node.JS см ответ от Yustas Alexu
А если на сервере лежит PHP, то в начале файла нужна строчка
header("Access-Control-Allow-Origin: *");
Этого будет достаточно чтобы указанный php-скрипт принимал запросы отовсюду, но лучше бы добавить и остальные заголовки указанные в том же ответе
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы