axios 库是前端非常流行的网络请求库，下面是我刚使用的时候遇到的坑

本地开发跨域问题（CORS），首先在服务端要接受跨域

1
header("Access-Control-Allow-Origin: *");

这个时候 axios 在 post/put 的时候会先发起 option 请求。如果服务器不支持，则返回失败。为了避免这个，要避免 json 请求。qs 库可以把 json 解析成 www-form 的样子，即 a=1&b=2

axios 有两个数据参数 params 和 data，params 会被放到 url 里，data 会被放到 body 里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const qs = require('qs')

  param.headers = {
    'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
  }
  let method = param.method ? param.method.toUpperCase() : 'GET'
  if(method == 'POST' || method == 'PUT'){
    param.data = qs.stringify(param.data, {arrayFormat: 'brackets'})
  } else {
    param.params = param.data
    param.paramsSerializer = params => {
      return qs.stringify(params, {arrayFormat: 'brackets'})
    }
  }
axios(param)

像上面这样修改后，浏览器就不会报跨域错误了，而且服务端还能获得 form 参数，而不是 json。