一、发现问题
在我自己的小项目中,用封装过的axios发起请求时,发现get请求并没有带上content-type。
我一开始还以为是我自己没设置axios请求的content-type,或者content-type写错了,后来发现,网上都是这么写的,没错啊。
二、解决问题
后来发现,axios默认是不会带上content-type的,你要自己去改一下,我晕。。。
在axios的请求拦截器上,加上config.data = {unused: 0},就可以在requestHeader上看到content-type了。
网上很多博客都是错误的,或者说是牛头不对马嘴的博客,泪目。。。
最后附带上我自己的那个axios文件
import axios from 'axios'
axios.defaults.baseURL = 'www.baidu.com/' // 换成你自己的请求地址
axios.defaults.timeout = 10000
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
// const token = store.state.token
if (config.method === 'get') {
config.data = {unused: 0} // 这个是关键点,加入这行就可以了 解决get 请求添加不上content_type
}
// token && (config.headers.Authorization = token)
return config
},
error => {
return Promise.error(error)
})
//
// // 响应拦截器
// axios.interceptors.response.use(
// response => {
// if (response.status === 200) {
// return Promise.resolve(response)
// } else {
// return Promise.reject(response)
// }
// },
// // 服务器状态码不是200的情况
// error => {
// if (error.response.status) {
// switch (error.response.status) {
// // 401: 未登录
// // 未登录则跳转登录页面,并携带当前页面的路径
// // 在登录成功后返回当前页面,这一步需要在登录页操作。
// case 401:
// router.replace({
// path: '/login',
// query: { redirect: router.currentRoute.fullPath }
// })
// break
// // 403 token过期
// // 登录过期对用户进行提示
// // 清除本地token和清空vuex中token对象
// // 跳转登录页面
// case 403:
// Toast({
// message: '登录过期,请重新登录',
// duration: 1000,
// forbidClick: true
// })
// // 清除token
// localStorage.removeItem('token')
// store.commit('loginSuccess', null)
// // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
// setTimeout(() => {
// router.replace({
// path: '/login',
// query: {
// redirect: router.currentRoute.fullPath
// }
// })
// }, 1000)
// break
// // 404请求不存在
// case 404:
// Toast({
// message: '网络请求不存在',
// duration: 1500,
// forbidClick: true
// })
// break
// // 其他错误,直接抛出错误提示
// default:
// Toast({
// message: error.response.data.message,
// duration: 1500,
// forbidClick: true
// })
// }
// return Promise.reject(error.response)
// }
// }
// )
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
function get (url, params, headers) {
headers = headers ? headers : {};
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
headers: headers
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
function post (url, params, headers) {
headers = headers ? headers : {};
return new Promise((resolve, reject) => {
axios.post(url, params, headers)
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
export default { get, post }
/*
使用,在全局中声明。
import http from "..."
Vue.prototype.$http= http;
在vue文件中使用:
this.$http.get("", { username: "张三", age: "12" }).then(function(res) { ... }).catch(function(err) { ... })
*/
看到这了,就留下你的点赞吧,小白博主,需要各位看官的点赞与支持哦😜😄