vue post请求 参数带有中文后端无法接收或者收到乱码,无法返回数据问题

问题来源: 在使用axios时,和java联调,发现调接口服务器始终拿不到参数data,但是检查network也的确传了data,才有了该文章。
基于 vue-axios 和 $.ajax 两种请求方式中数据传输的思考
以java为例,数据传输的起源:
一开始,Java为了实现前后端通信,在http协议允许下,制定了数据传输必须遵守的规则:
1) 数据传输 仅允许 以 字符串 或者 二进制流数据的方式传输, number object等格式 都不允许。
2) 规定了字符串数据传输的内容类型格式,即content-type,有以下几种:
a) 底层的xmlhttprequest 默认的Content-Type 是 text/plain;charset=UTF-8
即: 数据可以为 “aaaa” , “[12313],{dsafdsafsd:12313}”
b) 原生的Form表单提交, 对 xmlhttprequest 的字符串数据加了规则校验,
即 字符串数据 必须以key-value的方式存在,以便区分参数,于是键值对的概念出现了。
键值对以 & 隔开, 如: username=1111 & password=2222
为了和 以前的数据类型区分,则修改 Content-Type 为 application/x-www-form-urlencoded
并且以 input 的 name 为 键,value为值, 多个 input 以 & 隔开
<form>
<input name=“username” value=“1213”/>
<input name=“password” value=“321”/>
</form>
submit的时候,将 获取所有 input 的键值对,形成 data: “username=1213&password=321”
发送到了后台,后台接受到该字符串,
c) 随着互联网发展,数据传输越来越复杂,form已经不足以满足需求。
于是ajax出现了,并且 首先实现了 form 表单提交的功能
即 Content-Type 为 application/x-www-form-urlencoded,且数据传输为 键值对格式。
但是在 书写方式上, data以 Object 的形式 书写,内部实现将 Object 转为 字符串键值对
又发展了一段时间, 出现了 一个新的 表述 key-value字符串数据的的方式,称之为 JSON,
符合JSON格式的字符串 也让服务器 很方便的获取参数。
Ajax 又实现了该种传参,
于是 ajax的 data:{username: 1213, password: 321} ,
最终传输时被 JSON.stringify(data) => “{“username”: 1213, “password”: 321}”
而服务器,则 JSON.parse(data),拿到了 data Object
为了区分该种数据格式,则修改 Content-Type 为 application/json
d) 又发展了一段时间,简单的字符串传输也不满足了,想传输文件,word,excel,txt,图片等,即文件流传输
则由提出 一种数据内容格式,规定数据以 二进制 传输
并修改Content-Type 为 multipart/form-data
e)。。。。。
汇总content-type:
1)text/plain;charset=UTF-8
2)application/x-www-form-urlencoded 浏览器以 FormData 体现
3)application/json 浏览器以 requestPayload 体现
4) multipart/form-data
5)。。。。。。
以前的java服务器,为求代码简单,规定传输的字符串数据格式为 application/x-www-form-urlencoded,
所以 form 表单提交 和 $.ajax 都是默认 application/x-www-form-urlencoded
而后续 java出现各种框架, 如spring, 可以解决多种 传参方式,如 application/json
后续的 第二代/三代 ajax,如 搭配vue的axios,都将默认的Content-Type修改为 application/json,
例子:
Vue项目倘若用了axios,而java的兄弟接收不到参数的话,则
1)必须修改 content-type类型为 application/x-www-form-urlencoded
2)还原键值对数据格式,通过qs模块(不需要安装,node自带的)转换数据格式即可
具体如下:(这里是在拦截器里进行设置,具体情况自己对照着处理)
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.interceptors.request.use(config => {
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config
}, error => {
// Do something with request error
Promise.reject(error)
})
其他的类ajax 也是一样解决。
vue post请求 参数带有中文后端无法接收或者收到乱码,无法返回数据问题的更多相关文章
- tomcat中的URL参数为中文,servlet接收后显示乱码
URL中参数的值为中文时,servlet接收后显示为乱码,如下图: 这时候需要修改tomcat的中的server.xml文件.该文件路径为 tomcat安装目录下的conf文件夹. 为修改前的se ...
- 【C#】POST请求参数含中文,服务器解析得到乱码
问题:POST请求参数含有中文,已将含中文的string以UTF-8编码格式转为byte[],并写入到请求流中,但服务器收到数据后以UTF-8解码,得到的依然是乱码! 百度到了以下方法,但依然无法解决 ...
- linux curl http get 请求中带有中文参数或者特殊字符处理
在使用c++去请求http服务的时候,使用的是著名的curl工具提供的类库 libcurl,但是在使用的过程中发现,如果请求的参数值带了空格或者是参数是中文,会导致响应的回调函数没有被执行,虽然cur ...
- GET请求参数为中文时乱码分析
问题描述 近期做任务时,跟后端联调时遇到一个问题,前端发送get请求,当参数值有中文时,请求失败,请求参数变为乱码.(ps:一般当参数有中文时,很少使用get请求,而是使用post请求来传输数据,请求 ...
- ajax请求参数为中文乱码的情况
解决中文乱码问题的方法有很多. 一.前提是ajax请求传递参数对象到后台,对象中的某个参数的值为中文,到后台之后出现乱码,导致报错.问题解决如下: rest层: 二.在tomcat的server.xm ...
- 解决请求参数的中文乱码问题(get、post)
2018-11-28 在web请求与响应中,会遇到乱码问题,比如填写表单数据时,难免会输入中文,姓名.公司名称等.由于HTML设置了浏览器在传递请求参数时,采用的编码方式是UTF-8,但在解码时采用的 ...
- get请求参数为中文,参数到后台出现乱码(注:乱码情况千奇百怪,这里贴我遇到的情况)
前言 get请求的接口从页面到controller类出现了乱码. 解决 参数乱码: String param = "..."; 使用new String(param.getByte ...
- SQL查询语句中参数带有中文查询不到结果
今天写个小demo的时候发现sql语句里面的username为中文的时候就不能查到正确结果,sql语句如下: String sql = "select * from user where u ...
- URL参数带中文,后台接收乱码解决方案
1.前台中文参数用encodeURIComponent()进行编码,如: var textName= encodeURIComponent(name); 2.对整个URL用encodeURI()进行编 ...
随机推荐
- vuex的使用心得
今天的工作内容-----vuex的使用心得: 都知道,对于小型的项目来说不必使用vuex,但是对于需要把共享的变量全部存储在一个对象里面,然后把这个对象放在顶层组件中以供其他组件使用.其实vuex就是 ...
- 关于adsl vps 拨号ip服务器
我这几天写了一遍在xp上的文章,但是因为xp上貌似只能使用squid2.6版本的,tinyproxy也不能用,而且怎么弄不出去vps端的端口出来 https://www.cnblogs.com/zen ...
- MySQL 整体架构一览
MySQL 在整体架构上分为 Server 层和存储引擎层.其中 Server 层,包括连接器.查询缓存.分析器.优化器.执行器等,存储过程.触发器.视图和内置函数都在这层实现.数据引擎层负责数据的存 ...
- JavaMail(二):利用JavaMail发送复杂邮件
上一篇文章我们学习了利用JavaMail发送简单邮件,这篇文章我们利用JavaMail发送稍微复杂一点的邮件(包含文本.图片.附件).这里只贴出核心代码,其余代码可参考JavaMail(一):利用Ja ...
- 【Java实用工具】——使用oshi获取主机信息
最近在筹划做一个监控系统.其中就要获取主机信息,其中遇到一些问题.在此做个记录,以便以后查阅. 在该监控系统中,想要做到主机的CPU.内存.磁盘.网络.线程.JVM内存.JVM GC 等维度的监控,J ...
- 利用mnist数据集进行深度神经网络
初始神经网络 这里要解决的问题是,将手写数字的灰度图像(28 像素 x28 像素)划分到 10 个类别中(0~9).我们将使用 MINST 数据集,它是机器学习领域的一个经典数据集,其历史几乎和这个领 ...
- Java 注解简介
一,什么叫注解 用一个词就可以描述注解,那就是元数据,即一种描述数据的数据.所以,可以说注解就是源代码的元数据.比如,下面这段代码: 1 2 3 4 @Override public String t ...
- MySQL设置外键报错 #1452 - Cannot add or update a child row: a foreign key constraint fails 解决方法
MySQL数据库,当我尝试在A表中设置B表的主键为外键时,报出错误:#1452 - Cannot add or update a child row: a foreign key constraint ...
- Ubuntu的BEEP去哪里了?
一直知道ubuntu的beep不响应了,但是一直都没太关注过它怎么了. 今天关注了一下,发现网上都是在问怎么关掉它的,时间还是在07年左右. 搜索到了一些帖子,有一些是说没有找到恢复的方法,还有一些, ...
- hdu1078 dfs+dp(记忆化搜索)搜索一条递增路径,路径和最大,起点是(0,0)
#include<bits/stdc++.h> using namespace std; typedef unsigned int ui; typedef long long ll; ty ...