前端采用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. linux根分区满了如何处理,查找大文件方法

    一:如果linux根分区使用量达到100%,会造成如下现象: root不能登录 系统不能正常启动 二:通过命令查找根分区内的大文件 du -sh /* 2>/dev/null | sort -h ...

  2. 1001: [BeiJing2006]狼抓兔子

    1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 12827  Solved: 3044[Submit][ ...

  3. Mysql 基本用法

    Java中两种常用的数据库: MYSQL     Oracle MYSQL  :开源免费的数据库,小型的数据库.由瑞典MySQL AB 公司开发,适合中小企业使用,由C语言和C++编写的.已经被Ora ...

  4. 初入Spring-boot(三)

    Spring boot 的运行原理 Spring boot关于自动配置的源码在spring-boot-autoconfigure-xxxx.jar内. 一.可以通过下面三种方式查看当前项目中已启用和未 ...

  5. hdu1596 find the safest road - floyd

    2017-08-04 14:42:56 writer:pprp 题意: Problem Description XX星球有很多城市,每个城市之间有一条或多条飞行通道,但是并不是所有的路都是很安全的,每 ...

  6. jenkins 环境搭建与入门示例

    环境说明: 1.win7 2.tomcat 9.0.0.M17 3.jenkins 2.32.2.war jenkins 环境搭建 1.下载jenkins部署包 https://jenkins.io/ ...

  7. python基础8之类的实例化过程剖析

    一.概述 之前我们说关于python中的类,都一脸懵逼,都想说,类这么牛逼到底是什么,什么才是类?下面我们就来讲讲,什么是类?它具有哪些特性. 二.类的语法 2.1 语法 class dog(obje ...

  8. iOS自动化探索(三)WebDriverAgent Python Client

    之前我们在终端试着调用过WDA API, 今天我们在看一个Python封装的api库 https://github.com/openatx/facebook-wda 安装方式(一): pip inst ...

  9. jQuery 图片自动播放

    var imgArray = new Array("images/1.jpg", "images/2.jpg","images/3.jpg" ...

  10. IIC时序图