SyntaxError: Неожиданный токен e в JSON в позиции 1 ||ошибка 400, неверный запрос

Question

Я пытаюсь отправить данные формы в моем приложении Vue.У меня есть экспресс-бэкэнд API.Конечная точка, которую я пытаюсь опубликовать, прекрасно работает на почтальоне.Я получаю либо «SyntaxError: Неожиданный токен g в JSON в позиции 0», либо «400: Bad Request»

Я пытался использовать JSON.parse (this.description).Я попробовал это без разбора this.description.

В моем конфигурационном файле axios я попытался изменить заголовок ответа на «application / json» в моем перехватчике ответов axios.Я попробовал это, не делая этого также.

Вот форма

<v-dialog v-model="dialog" persistent max-width="600px">
      <template v-slot:activator="{ on }">
        <v-tooltip top>
          <v-btn small fab color="white" dark v-on="on" slot="activator">
            <v-icon color="primary">add</v-icon>
          </v-btn>
          <span>Add Task</span>
        </v-tooltip>
      </template>
      <v-card>
        <v-card-title>
          <span class="headline">Add Task</span>
        </v-card-title>
        <v-card-text>
          <v-form>
            <v-textarea v-model="description" label="Description"></v-textarea>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
          <v-btn color="blue darken-1" flat @click="addTask">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

Вот запрос axios

methods: {
    ...mapActions(["fetchTasks"]),
    addTask() {
      console.log(this.description);
      axios
        .post("tasks", JSON.parse(this.description))
        .then(response => {
          dialog = "false";
        })
        .catch(err => console.log(err));
    }
  }

Вот мой конфигурационный файл axios

"use strict";

import Vue from 'vue';
import axios from "axios";
import store from '../store';

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = '';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  baseURL: "http://localhost:3000/",
  timeout: 60 * 1000, // Timeout
  withCredentials: false, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function (config) {
    // Do something before request is sent
    let token = store.getters.getToken;

    if (token) {
      config.headers.common.Authorization = token;
    }

    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function (response) {
    // Do something with response data
    return response;
  },
  function (error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

Plugin.install = function (Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin)

export default Plugin;

Здеськонечная точка

router.post('/tasks', auth, async (req, res) => {
  const task = new Task({
    ...req.body,
    owner: req.user._id
  });

  try {
    await task.save();
    res.status(201).send(task);
  } catch (err) {
    res.status(400).send();
  }
});

Вот данные заголовков на вкладке Сеть Google Chrome

Answer 1

Если ваш API ожидает JSON-запрос (согласно вашему комментарию), вам нужно изменить конфигурацию axios с:

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

до:

axios.defaults.headers.common['Content-Type'] = 'application/json';

В качестве меры предосторожности я бы также порекомендовал это, учитывая, что вы ожидаете получить JSON взамен:

axios.defaults.headers.common['Accept'] = 'application/json';

И для явного подтверждения запрошенного с заголовком:

axios.defaults.headers.common['X-Requested-With'] = 'XmlHttpRequest';

Что касается пост-вызова axios, предполагая, что this.description - это текст, который был введен в поле ввода или текстовую область, вам нужно будет построить JSON-запрос следующим образом:

.post("tasks", {
  'description': this.description
})

ИЛИ установить объект данных, например:

data () {
    return {
        formFields: {
            description: null
        }
    }
}

И обновите v-модель до:

<v-textarea v-model="formFields.description" label="Description"></v-textarea>

и затем вы можете использовать:

.post("tasks", this.formFields.description)