前端采用vue+axios 后端采用spring boot restful

问题: 前端get 请求需要传递array 字段值 后端由于tomcat 版本问题,不支持url接受特殊字符包括 [] {} 等。

Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

百度搜索到的方案 大都是让 采用字符串形式传参 或者 urlencoding 或者 post 传参、get方式 body传参 等方式

采用以上方式是可以解决问题,但是设计到前后端均需要处理,不利于前后分离开发 或者 post 查询不符合 restful api 的 规范。

问题url如下:

  1. ?ckTbSelected[]=elementId1&ckTbSelected[]=elementId2&page=1&size=10
  2. Request Method:
    GET

个人建议解决方案

1. 安装 qs

https://www.npmjs.com/package/qs

You may use the arrayFormat option to specify the format of the output array:

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'

2.get 参数序列化

https://www.kancloud.cn/yunye/axios/234845

例:

// `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},

// `paramsSerializer` 是一个负责 `params` 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'repeat'})

},

效果:

?ckTbSelected=elementId1&ckTbSelected=elementId2&ckTbSelected=elementId4&page=1&size=10

3. 后台对象的属性采用,List<String> 接收即可。

RESTful Get方式传参json格式后端400 解决方案的更多相关文章

  1. 使用Fiddler工具发送post请求(带有json数据)以及get请求(Header方式传参)

    Fiddler工具是一个http协议调试代理工具,它可以帮助程序员测试或调试程序,辅助web开发. Fiddler工具可以发送向服务端发送特定的HTTP请求以及接受服务器回应的请求和数据,是web调试 ...

  2. 二十一、springboot之定制URL匹配规则(项目中遇到的问题:get方式传参,带有小数点,被忽略)

    一.问题描述: get方式传参,在传送价格,积分时(带有小数点),debug后台微服务接受到的参数,却不带小数点,如:price是0.55,后台接受后却是0 二.解决 在WebConfiguratio ...

  3. 页面ajax请求传参及java后端数据接收

    js ajax请求传参及java后端数据接收 Controller: package com.ysl.PassingParameters.controller; import java.util.Li ...

  4. 前端集合传参,springmvc后端如何接收

    废话不多说,上代码 后端接收对象: class ObjectA{ private String a; private String b; private List<ObjectB> lis ...

  5. 同一路由带参刷新,以及params和query两种方式传参的异同

    同一路由应该不叫跳转了吧,就先叫刷新好了. 需求及问题 今天做web课设有这样一个需求: 在导航栏中一项叫做教师队伍一级菜单下,有三个二级菜单,分别为教授.副教授.讲师.这三个二级菜单分别对应一个页面 ...

  6. vue:子组件通过调用父组件的方法的方式传参

    在本案例中,由于子组件通过调用父组件的方法的方式传参,从而实现修改父组件data中的对象,所以需要啊使用$forceUpdate()进行强制刷新 父组件: provide() { return { s ...

  7. java结合node.js非对称加密,实现密文登录传参——让前后端分离的项目更安全

    前言   在参考互联网大厂的登录.订单.提现这类对安全性操作要求较高的场景操作时发现,传输的都是密文.而为了目前项目安全,我自己负责的项目也需要这方面的技术.由于,我当前的项目是使用了前后端分离技术, ...

  8. WCF Rest:不使用UriTemplate使用post方式传参解决HTTP400问题以及参数映射问题

    在使用POST方式向服务提交数据时,出现HTTP400异常,以下代码描述: 服务接口定义: [OperationContract] [WebInvoke(ResponseFormat = WebMes ...

  9. React路由安装使用和多种方式传参

    安装路由 npm i react-router-dom -S 引入路由 import { BowserRouter as Router, Route, Switch, ... } from " ...

随机推荐

  1. Vmware ESXi 6.0 多Vlan部署,vSphere Client管理方法

    背景: 公司IT部门新购了两台服务器与一台存储,打算做虚拟化,并将存储分成两个部分,分别配给那两台服务器.在宿主机上要安装的虚拟机属于不同的网段,这就涉及了多VLAN,当然这并不是多么高深的技术,属于 ...

  2. Cocos2d-x项目移植到WP8系列之九:使用自定义shader

    本文原链接:http://www.cnblogs.com/zouzf/p/3995132.html 有时候想得到一些例如灰度图等特殊的渲染效果,就得用到自定义shader,关于shader的一些背景知 ...

  3. Mybatis常见问题

    1.#和$的区别和联系 1.1#是占位符,会对Sql进行预编译,相当于?:$是做Sql拼接,有sql注入的隐患 1.2#不需要关注数据类型,Mybatis自动实现类型转换,$必须自己判断数据类型联系 ...

  4. KMP(转自matrix67)

    蒟蒻笔者自己发现matrix67大佬讲的十分明白,然后现在网络上的排版也是有些微的问题,就稍稍改了一下,然后把代码改成了c++的. 如果机房马上要关门了,或者你急着要和MM约会,请直接跳到第六个自然段 ...

  5. ScrollView嵌套使用ListView冲突的解决与分析

    因为ScrollView与ListView都是具有滚动条的控件,所以嵌套在一起使用的时候可能会出现事件的冲突,比如我就遇见了ListView中只显示一条数据的问题.解决的办法,就是自定义了一个List ...

  6. Rancher+K8S部署手册

    目前创建K8S集群的安装程序最受欢迎的有Kops,Kubespray,kubeadm,rancher,以及个人提供的脚本集等. Kops和Kubespary在国外用的比较多,没有处理中国的网络问题,没 ...

  7. MySQL主从配置实现

    //////////////////////MySQL主从配置//////////////////////////// 首先,两边都要安装MySQL,启动两边的MySQL 接着,配置主从,要保证主从数 ...

  8. ButterKnife使用详谈

    (1)ButterKnife是什么? 在开发过程中,我们总是会写大量的findViewById和点击事件,像初始view.设置view监听这样简单而重复的操作让人觉得特别麻烦,当然不会偷懒的程序员不是 ...

  9. ng2 学习笔记(一)

    ng2发布了一段时间,最近才开始着手学习一下,ng2可以说变化海是比较大的,现在写一些学习过程中要注意的点,新手可以参考,大神可以指导: 按照文档来吧: 1.快速开始:没什么可说的,直接上git 克隆 ...

  10. <<Hadoop基础教程》之初识Hadoop【转】

    Hadoop一直是我想学习的技术,正巧最近项目组要做电子商城,我就开始研究Hadoop,虽然最后鉴定Hadoop不适用我们的项目,但是我会继续研究下去,技多不压身. <Hadoop基础教程> ...