问题记录

在联调过程中遇到两个小问题，均已解决，问题如下：

1，axios代理过去之后，后端获取到的Api路径为代理路径

问题描述

在之前的项目前期开发中，因为使用的axios配置已经形成了一套既定的模板，所以实际上规避了很多问题，譬如这里遇到的这个问题：导致的原因就是在配置项中没有进行代理重写。

解决方法

原配置如下：

proxy: {
  '/api': {
    target: 'http://192.168.22.207:8080/',
    changeOrigin: true,
  }
}

增加重写项：

proxy: {
  '/api': {
    target: 'http://192.168.22.207:8080/',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '' // 后端接受的api路径，代理字符会被重写为空字符
    }
  }
}

2，axios代理请求发送过去之后，后端报错如下：

问题描述

Required request parameter 'userName' for method parameter type String is not present userName参数已传递，但是后端报错是未找到某字段

这个原因较大可能性是由于在我们使用POST请求时，axios默认headers为application/json,但是web服务默认识别Content-Type: application/x-www-form-urlencoded,所以导致数据传递之后会被打包起来，对应的后端逻辑也就无法获取到特定的字段了。

解决方法

解决这个问题的方法就是使用qs去序列号请求参数

import qs from "qs"
INTERCEPTORS(AXIOS_INSTANCE).post(url, qs.stringify(data));

使用qs时，qs会自动将请求设置为Content-Type: application/x-www-form-urlencoded,所以不需要特别指定headers的值。

3，axios中post请求传参，后端无法获取到数据的问题

问题描述

请求方式，抬头一致的情况下，参数以及传递，但是后端无法获取到数据

问题原因

axios 中post有两种传参方式，一种是以data对应后端的Body Data，另一种是以params对应后端的Parameters。

• 使用Parameters时，Content-Type不传，或者直接传application/x-www-form-urlencoded，若传application/json出错。
• 使用Body Data时，Content-Type可传application/x-www-form-urlencoded或application/json，两者的区别是数据格式不同。

一般来说，Get请求使用Parameters，Post请求使用Body Data

精确的对于Post来说：

1. 普通的Post请求和上传接口，使用Parameters
2. jsonh和xml点数据格式请求接口，使用Body Data*

详细来解释，根据post请求数据的格式，分两种情况：map格式、json格式:

• Post请求数据为map格式，当post请求数据为map格式，即参数名、参数值为key-value键值对，请求的参数添加在Parameters参数表中即可
• Post请求数据为json格式，目前阶段比较流行的是json格式传递参数，使用jmeter时，将json格式的请求数据加入到http请求BodyData中

另外，由于Post请求方式，如果不设置Headers的content-type，基本默认会以 application/x-www-form-urlencoded 方式提交数据。为了Post请求确保传的是json格式，还需要在请求头中声明一下请求参数的格式为json

解决方法

在post请求中使用params传参

let params = { baseURL: bridge.ApiUrl(), timeout: 50000,params:data }
axios.create(params)

4,axios使用post请求，后端使用Parameters获取参数，无法获取对象的问题

问题描述

在实际工作中，使用Parameters传参中遇到前端传递数组参数给后端后，后端无法正常获取的情况，该情况有较大的可能性是由于数据序列化引起的

axios中params默认使用JSON.stringify()方法进行序列化，而我们要使用qs.stringify进行序列化。

解决方法

在axios中进行params序列化配置

paramsSerializer: _=> qs.stringify(_, { indices: false })

记录结语

持续更新项目联调方面的实战问题