vue中axios的基本配置
vue中axios的基本配置
1.配置默认地址
axios.defaults.baseURL = "";
2.发送数据详解
axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。也就是说,我们的 Content-Type 变成了 application/json;charset=utf-8 ,这是axios默认的请求头content-type类型。但是实际我们后端要求的 'Content-Type': 'application/x-www-form-urlencoded' 为多见,这就与我们不符合。所以很多同学会在这里犯错误,导致请求数据获取不到。明明自己的请求地址和参数都对了却得不到数据。
post请求常见的数据格式(content-type)
1.Content-Type: application/json : 请求体中的数据会以json字符串的形式发送到后端
2.Content-Type: application/x-www-form-urlencoded:请求体中的数据会以普通表单形式(键值对)发送到后端
3.Content-Type: multipart/form-data: 它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。
Content-Type: application/x-www-form-urlencoded配置详解:
//请求头
axios.defaults.headers.post["Content-Type"]="application/x-www-form/urlencoded"
//请求体-查询字符串
axios.defaults.transformRequest = [(data)=>{ return qs.stringify(data,{arrayFormat:'repeat'}); }]
Content-Type: application/json:
这种是axios默认的请求数据类型,我们只需将参数序列化json字符串进行传递即可,所以可以无需配置。
下面给出一个配置好的例子:
/** axios的配置文件 1、设置post数据格式为表单格式 2、设置基路径 3、序列化字符串 */ import axios from 'axios'; import qs from 'qs'; //配置 //配置前后端数据交互的请求头: axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; // 设置后台的访问地址 axios.defaults.baseURL = '地址'; // 拦截 axios.interceptors.request.use((config) => { if (config.method === 'post') { config.data = qs.stringify(config.data,{arrayFormat: 'repeat' }); } return config; }, (error) => { return Promise.reject(error); }); export default axios; //在vue主组件中引入即可 // import axios from '@/http/axios'