SyntaxError：JSON中位置1处的意外令牌e || 400错误的要求

Question

我正在尝试在Vue应用程序中提交表单数据。我有一个快速的后端API。我尝试发布的端点可以在邮递员上完美运行。我不断收到“ SyntaxError：JSON在位置0处出现意外的令牌g”或“ 400：错误的请求”

我尝试使用JSON.parse（this.description）。我试过了，没有解析this.description。

在axios配置文件中，我尝试在axios响应拦截器中将响应标头更改为“ application / json”。我没有做也尝试过。

这是表格

<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 post调用，假设this.description是输入到输入字段或textarea中的文本，则需要构建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)