zoukankan      html  css  js  c++  java
  • 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 也是一样解决。

  • 相关阅读:
    Hadoop面试
    Node.js面试题
    Node.js面试题
    [转载]最好的关系,是我懂你的不容易
    据说练就了一指禅神功的觅闻实时手机新闻网,正以每天2000+IP的用户量递增。有智能手机的可以当场进行体验,没有的就算了哈
    刚6瓶啤酒4两56度白酒下肚,居然20分钟做了一手机版网站 !
    Android:刚6瓶啤酒4两56度白酒下肚,居然20分钟做了一手机版网站 !
    IT人生的价值和意义 感觉真的有了
    (Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议 (图)
    (Android 即时通讯) [悬赏],无论是谁发现一个漏洞奖励人民币1000元!
  • 原文地址:https://www.cnblogs.com/xzybk/p/11769288.html
Copyright © 2011-2022 走看看