javascript - SyntaxError:位置 1 处 JSON 中的意外标记 e || 400 错误请求
问题描述
我正在尝试在我的 Vue 应用程序中提交表单数据。我有一个快速的后端 API。我试图发布到的端点在邮递员上完美运行。我不断收到“SyntaxError: Unexpected token g in JSON at position 0”或“400: Bad Request”
我曾尝试使用 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();
}
});
这是谷歌浏览器网络标签下的标题数据
解决方案
如果您的 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-model 更新为:
<v-textarea v-model="formFields.description" label="Description"></v-textarea>
然后你可以使用:
.post("tasks", this.formFields.description)
推荐阅读
- html - 有没有办法从特定位置重定向对 url 的访问?
- flutter - Flutter:如何保存一个 Widget 的状态,然后在创建另一个 Widget 时再次设置
- javascript - 将 mongoDB 中的时间从本地时间迁移到 UTC
- python - 在 python 中调用 Matlab 对象函数
- regression - 在 Eviews 更改样本期间一次运行多个回归
- python - 函数初始化签名中冒号的含义
- c# - 一个 ASP.NET Core Web API 控制器可以有多个 ControllerRoute 吗?
- html - 单击外部时如何删除按钮的背景颜色?
- css - 如何将物化 css 与脱机反应一起使用?
- sql - 使用 SQL Server 提取 JSON 中嵌套数组的值