axios请求没带上、没有content-type的问题

一、发现问题

在我自己的小项目中，用封装过的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) { ... })
*/

看到这了，就留下你的点赞吧，小白博主，需要各位看官的点赞与支持哦😜😄