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

Question

[oleg_templ]

Начинаю изучать 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.

Answer 1

[lavezzi1]

const str = JSON.stringify(this.postBody);
axios.post('http://localhost:8081/', str)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

Ошибка то у вас какая?

Comments

[oleg_templ]

поправил описание, axios сам преобразует в json при отправке.

текст ошибки
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.

[oleg_templ]

ошибка в ответ на ваше решение

localhost/:1 Failed to load localhost:8081/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8080' is therefore not allowed access. The response had HTTP status code 404.
last.vue?1c47:40 Error: Network Error
at createError (createError.js?16d0:16)
at XMLHttpRequest.handleError (xhr.js?ec6c:87)

[lavezzi1]

oleg_templ, ну, все правильно. В ошибке все написано, исправляйте ее. Если кратко, то в ней говорится с данного домена вы сделать запрос. С axios все в порядке.

[oleg_templ]

да я и не хочу не чего с него стягивать) мне туда отправить нужно) вот код для проверки данных которые приходят. Проверял его через отправку форм,все срабатывало.Думаю даже axios и на клиенте и на сервере использовать. Но помойму это уже будет лишнее,учитывая что много кода на express будет.

var express = require("express");
var bodyParser = require("body-parser");
var fs = require('fs');
var app = express();
 
// создаем парсер для данных application/x-www-form-urlencoded
var urlencodedParser = bodyParser.urlencoded({extended: false});
 
app.use(express.static(__dirname + "/public"));
 
app.post("/", urlencodedParser, function (request, response) {
    if(!request.body) return response.sendStatus(400);
    console.log(request.body);

    // преобразуем данные в json
    var str = JSON.stringify(request.body);
    // записываем данные в json
	fs.writeFileSync('test.json', str); 


//  отправляем ответ
  // response.send(`${str}`);
});
 

app.listen(8081);
 console.log ('http://localhost:8081' )

[lavezzi1]

https://stackoverflow.com/questions/10636611/how-d...

[oleg_templ]

lavezzi1, в статье приводяться среди прочих варианты решения,благодарю
мне помогло на сервере.Похожий вариант предложил Yustas Alexu Yustas Alexu ,но там нода отругалась на неверный синтаксис.

app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

Answer 2

[Yustas Alexu]

Если 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();
});

Comments

[oleg_templ]

Благодарю за наставление на путь истинный.

app.use(async (request, response, next) => {
^
SyntaxError: Unexpected token (
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:383:7)
at startup (bootstrap_node.js:149:9)

помогло вот это,те же буквы только старый стандарт)
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', req.headers.origin);
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

[Yustas Alexu]

oleg_templ, да, это async/await из ES6. Очень удобная вещь.

Answer 3

[Евгений]

За два года наверняка, конечно, разобрались. Но для тех кто заглянет — в тексте ошибки кроется ответ: в скрипте по указанному url нет заголовка Access-Control-Allow-Origin.
Для серверов на Node.JS см ответ от Yustas Alexu
А если на сервере лежит PHP, то в начале файла нужна строчка
header("Access-Control-Allow-Origin: *");
Этого будет достаточно чтобы указанный php-скрипт принимал запросы отовсюду, но лучше бы добавить и остальные заголовки указанные в том же ответе