Начинаю изучать 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.
Простой
