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 也是一样解决。

  • 相关阅读:
    27. Remove Element
    列表变成字典
    1. Two Sum
    CVPR2019:What and How Well You Performed? A Multitask Learning Approach to Action Quality Assessment
    959. Regions Cut By Slashes
    118. Pascal's Triangle
    loj3117 IOI2017 接线 wiring 题解
    题解 NOI2019 序列
    题解 省选联考2020 组合数问题
    题解 Educational Codeforces Round 90 (Rated for Div. 2) (CF1373)
  • 原文地址:https://www.cnblogs.com/xzybk/p/11769288.html
Copyright © 2011-2022 走看看