vue axios使用post提交数据 400错误

报400问题解决

初始化axios实例
http.js

// create an axios instance
const service = axios.create({
  baseURL: window.config.restURL, // api的base_url
  timeout: 20000000000 // request timeout
})

// POST传参序列化
service.interceptors.request.use((config) => {
  if (config.method === 'post') {
    if (!config.isFormData) {
      //添加{ indices: false } 参数
      config.data = qs.stringify(config.data,{ indices: false })
    }
  }

  return config
}, (error) => {
  alert('传参错误')
  return Promise.reject(error)
})

// code状态码200判断
service.interceptors.response.use((res) => {
  if (res.status !== 200) {
    return Promise.reject(res)
  }
  return res
}, (error) => {
  // alert('网络异常')
  return Promise.reject(error)
})

export default service

后台接口使用String[] parms接受参数，使用qs对参数进行序列化，qs.stringify(config.data,{ indices: false })，添加{ indices: false } 参数，否则接受数据时报400

import request from '@/utils/http'

export function likeQuery(arr) {

  return request({
    url: '/metaData/likeQuery',
    method: 'post',
    data:{
      params:arr
    }
  })
}

这样就OK啦！！

qs.stringify

默认

qs.stringify({ a: [1, 2, 3] });
//  'a[0]=1&a[1]=2&a[2]=3'

通过设置indices为false可以实现如下效果

qs.stringify({ a: [1, 2, 3] }, { indices: false });
//  'a=1&a=2&a=3'

后端希望的其他类型数据格式，可以通过arrayformat来实现：

qs.stringify({ a: [1, 2, 3 ] }, { arrayFormat: 'indices' });
//  'a[0]=1&a[1]=2&a[2]=3'

qs.stringify( { a: [1, 2, 3 ]} , { arrayFormat: 'brackets' });
//  'a[]=1&a[]=2&a[]=3'

qs.stringify( {a: [1, 2, 3 ]}, { arrayFormat: 'repeat' } );
//  'a=1&a=2&a=3'