vue + springmvc前后端传递数组参数问题

spring mvc获取数组参数的两种方式

实现要求：请求需要获取一个ids的Integer类型的数组

1. 方式一

请求中的请求参数以如下方式传递：

​ http://主机名:端口名/路径?ids=1&ids=2

springmvc服务器端不需要再参数前添加注解，直接使用**Integer[]或List<Integer>**类型即可，代码如下：

 	@RequestMapping("/getIds")
 	// 下面的@RequestParam("ids")可以不要
    public void getIds(@RequestParam("ids") Integer[] ids){}

2. 方式二

请求中的请求参数以如下方式传递(其中的**[]**需要进行URL编码)：

​ http://主机名:端口名/路径?ids[]=1&ids[]=2

在方式一中的参数前需要添加@RequestParam注解，并注明参数名称为ids[]，代码如下:

  	@RequestMapping("/getIds")
    public void getIds(@RequestParam("ids[]") String[] ids){}

遇到的问题:

服务器无法识别字符

• 问题描述

  Invalid character found in the request target. The valid characters are …

  这个问题是我在使用axios发送delete请求时传输数组数据遇到的，原因是axios没有将数组的中括号**[]**编码，服务器端无法识别导致的

• 解决办法

  使用qs，对参数进行转码

  const del = function (apiPath, params, successCallback, errorCallback) {
    return http.delete(apiPath, {
      params: params,
      // 这个将对参数进行转码
      paramsSerializer: params => {
        return qs.stringify(params, { indices: false })
      } })
    // thenResponse(req, successCallback, errorCallback)
  }
  

  以上代码封装了向服务器发送delete请求的操作

axios只发送options请求

• 问题描述

  由于跨域的预检机制，每次发送非简单请求的时候axios都会发送一次options请求查看是否有权限访问，但是我发送请求时发送完options请求后就不再发真正的请求了.

• 问题原因

  我在使用axios.create方法时指定了withCredentials: true,

  错误代码如下:

  let http = axios.create({
    baseURL: 'http://localhost:8086/app',
    // 这里的代码导致了错误，删除即可
     withCredentials: true,
    transformRequest: [function (data) {
      let newData = ''
      for (let k in data) {
        if (data.hasOwnProperty(k) === true) {
          newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'
        }
      }
      return newData
    }]
  })
  
  

参考资料

• 跨域中的预检机制MDN文档