Vue使用axios发送POST请求，后端为何无法接收数据？

本文共计854个文字，预计阅读时间需要4分钟。

1+前言+最近在前后端联调时发现了一个问题，可能自己平时不注意发送的内容格式，导致解决问题走了很多弯路，尤其是刚开始学习Vue知识后，发送请求的各种格式经常出错。

1 前言

最近在前后端联调的时候发现了一个问题，可能自己平时不注意发送的内容格式，导致解决问题的路上，走了很多弯路，尤其是在刚刚懂了一点Vue知识之后，发送请求的各种花式写法也是让人头大，我在这把我踩到的坑给大家介绍一下吧。

2 问题

这个问题是我前端登录的时候向后端发生post请求。在使用这个接口前，我使用 postman 确认过了几次，接口传参是没有问题的，而且使用params或者body传参都是能接收到的。然而还是报错了……我们先来看看一个截图吧。

我向后端发参数的时候无论如何我都接不到数据，然后我就开始各种怀疑和猜测

( a )后端接口问题
如果是后端接口问题，那么我用postman接到了呀，所以这一条虽然我不信，但是我还是去各种尝试修改，我修改的接口传递方式，我怀疑是不是跨域失败，然而都没能解决我的问题。

( b )怀疑跨域未成功
我仔细检查了是否存在全局代理(各种代理工具)
是否存在nodejs本身问题

( c )发送参数问题

我的请求代码如下：

axios.post('/api/home/login',{ params: { username: this.username, password: this.password } }).then(this.handleLoginSucc)

我自认为没有问题，但是又不敢确定，于是我又换了一种写法

// main.js配置 import axios from 'axios' // 配置请求的根路径 axios.defaults.baseURL = 'localhost:8088/caeser/' Vue.prototype.$example.com/cors.php'); // 为表单数据POST请求添加所需的HTTP头 XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 最后，发送我们的数据。 XHR.send(urlEncodedData); }

6 Axios知识点

6.1 全局默认值

axios.defaults.baseURL = 'caeser.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

6.2 拦截器

//添加请求拦截器 axios.interceptors.request.use(function(config){ // before success // must return config // 必须返回config return config; }, function(error){ // error }) //添加响应拦截器 axios.interceptors.response.use(function(response){ // return response; }，function（error）{ // error });

或者自定义实体

var instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});

7 总结

在学习vue的过程中是非常容易的，因为vue真的很方便使用，学起来很快，都是模板语法，直接COPY就行了，而且逻辑性很简单，就是在使用的时候，各种版本和插件要学会调试，多尝试多使用，而且为了好好写前端，我都下载了离线的CSS样式文件，因为很多样式我都没背下来，而且很多样式我都不知道，有很多新的好用的特性，都是值得使用的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。