vue axios 向后端请求数据失败

1. 后端未获取到 post 数据

问题背景

axios 请求代码 requset.js

 export function findList (params) {
  return axios({
    url: '/url/post',
    method: 'post',
    data: params
  })
}

.vue 文件中使用

import { findList } from '@/api/requset'
export default {
  created () {
    findList().then(res => {
      console.log(res)
    })
  }
}

控制台console的返回数据

console

NetWork 详情

携带数据如上

解决方法

可以看到携带的 data 并不是常用的 form-data 格式，查阅了 axios 文档 找到了解决方法，考虑兼容性的问题，使用 qs 的方法

import qs from 'qs'
export function findList (params) {
  return axios({
    url: '/url/post',
    method: 'post',
    data: qs.stringify(params)
  })
}

再次尝试，控制台和 NetWork 分别尝试

console

NetWork

2. POST请求列表数据

项目中以前都是使用 get 方法获取列表，新接口使用 post 方法，要求请求头携带 'content-type': 'application/json'，代码如下

export function findAll () {
  return axios({
    url: '/findAll',
    method: 'post',
    header: {
      'Content-Type': 'application/json'
    }
  })
}

postman 请求成功返回数据，项目中请求失败

console

提示 Content-Type 为 null，但是 post 的时候已经携带 header 了

解决办法

添加 data 字段

export function findAll () {
  return axios({
    url: '/findAll',
    method: 'post',
    data: {},
    header: {
      'Content-Type': 'application/json'
    }
  })
}

成功解决

console

暂时还没找到为什么一定要传一个空的 data 的原因，有知道的同学欢迎私信及评论