POST方式接收数组失败

一、遇到的问题

今天前端抛来一个问题，POST方式数组传参，后台接收不到list数组，但同样的GET方式传就不会出现问题，调试之旅开启。

二、分析问题

1、首先本地用postman直接访问接口，没出问题，那回到游览器，请求参数传过去之后，除了数组，其他的参数似乎都接收到了，那可以初步肯定数组传参时发生了变化。下面是后端参数接收部分代码：

@RequestParam(required = false, value = "storeCodes[]") List<String> storeCodes

可以肯定无论是GET或者是POST，这一部分的都是一样，前端说无论是哪种方式他都是传数组过去，GET方式可以请求到数组参数，但POST却不可以，说明有可能两者传参时数组发生了不同的变化
2、排除其他可能，POST的content-type为application/x-www-form-urlencoded，也没错
3、对比GET和POST请求时传递的参数(可复制请求为Fetch对比)-----嫌麻烦的可以直接跳到最后查看解决方法

重点来了

/* GET方式 */
http://XXXXXXXXXXXXXXXXXX?regionList[]=%E5%8D%8E%E4%B8%9C%E5%8C%BA&regionList[]=%E5%3D%8E%E5%8C%97%E5%8C%BA&regionList[]=%E5%8D%8E%E5%8D%97%E4%B8%80%E5%5C%BA&regionList[]=%E5%8D%8E%E5%8D%95%E4%BA%8C%E5%8C%BA

/* POST方式 */
fetch("XXXXXXXXX", {
  "headers": {
    "accept": "application/json, text/plain, */*",
    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6",
    "authorization": "undefined",
    "content-type": "application/x-www-form-urlencoded"
  },
  "referrer": "XXXXXX",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": "storeCodes%5B0%5D=CN7643212&storeCodes%5B1%5D=CN0104324&storeCodes%5B2%5D=CN0100943",
  "method": "POST",
  "mode": "cors"
});

仔细看发现，GET方式中的regionList和POST方式中的storeCodes同样为数组，传参时却不太一样。
我们都知道传数组时会在数组名后面自动加上[]，但分析这两种发现，GET方式会把数组每个子元素以&隔开，并在元素名后加上[]。而POST方式，同样也会把每个元素分开，但元素名后面除了[]还有元素的下标。
难道就是下标造成的，去除下标，重新fetch请求，果然成功接收到数组参数了。

小结： 一切都谜底都已经揭开，就是这数组转换时带上了下标，可后台是不会把这识别成数组的，只有同参数名的才会识别成数组

3、续探解决方式
知道原因了，那么怎么可以防止传参时又带上下标呢，和前端商量了下，只能想到把数组组装成不带下标的多个参数，可数组太大的话，那不是更加麻烦，还不如直接传字符串，再转换数组呢。
（这里有知道的方法朋友可以提出来供大家参考学习喔）
商量之后，前端建议我改为字符串传参
4、不死之心
本着能不改后端就不改的原则（懒），肯定是有解决方法，然后继续走上了求学之旅。
看了看网上其他人的，人家确实也可以这种方式传，但大都没有注明前端怎么传，突然想到postman是直接逗号分隔就识别为数组，会不会。。。一试，果然，亏我以前还一直认为这逗号分隔是工具软件实现的数组再传过去，原来这是后端就已经实现的了，折腾得我。

三、解决办法

直接把数组元素以逗号分隔作为字符串传参，其实就是后端会自动获取这字符串转化为list集合，就省去了我们自己去截取的了。

想要了解Fetch API的，详阅《Fetch API 脱坑教程》