前端采用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. 黑苹果Yosemite 10.10.1 修改wowpc.iso文件免选择直接启动Mac系统

    安装教程见: http://www.cnblogs.com/zouzf/p/4356641.html 网上很多教程都是OK的,但每个人的具体情况不同就可能有一些细节问题搞死你1.本文所指的 wowpc ...

  2. 14.python模块之subprocess

    我们几乎可以在任何操作系统上通过命令行指令与操作系统进行交互,比如Linux平台下的shell.那么我们如何通过Python来完成这些命令行指令的执行呢?另外,我们应该知道的是命令行指令的执行通常有两 ...

  3. Ubuntu系统Anaconda下载安装与切换源教程【转】

    本文转载自:https://blog.csdn.net/qq_36268036/article/details/81517893 1. 下载安装: 这里选用国内清华大学的Tuna开源软件镜像站作为演示 ...

  4. spring security采用基于持久化 token 的方法实现的remember me功能

    采用该方法相较于简单加密方式安全一些.具体的原理见 http://wiki.jikexueyuan.com/project/spring-security/remember-me.html  一.建立 ...

  5. EF Code-First 学习之旅 多对多的关系

    public class Student { public Student() { this.Courses = new HashSet<Course>(); } public int S ...

  6. strcpy的实现

    // // Strcpy.c // libin // // Created by 李宾 on 15/8/20. // Copyright (c) 2015年 李宾. All rights reserv ...

  7. java 实现Serv-U FTP 和 SFTP 上传 下载

    两种ftp使用java的实现方式 ,代码都已测试 第一种:Serv-U FTP 先决条件: 1.Serv-U FTP服务器搭建成功. 2.jar包需要:版本不限制 <!--ftp上传需要的jar ...

  8. yii2:不使用composer安装yii2-jui的方法

    今天有一个功能需要用到autocomplete,既然用yii2开发,在这里当然使用它自带的yii2-jui中的autocomplete组件了.yii2basic版默认是没有yii2-jui组件的,需要 ...

  9. 用临时用户数据目录启动Chrome,关闭安全检查等(解决Cross origin requests are only supported for HTTP?)

    Cross origin requests are only supported for HTTP? 参考:https://www.zhihu.com/question/20948649 批处理: s ...

  10. Intent Flag启动模式P203

    Activity启动模式:点此查看 Intent intent = new Intent(); /** * Intent.FLAG_ACTIVITY_NEW_TASK * 使用一个新的Task来启动一 ...