vue的axios使用时，Content-Type 引发的参数接收不到的问题回顾

最新推荐文章于 2024-04-04 12:01:13 发布

MakeGreatEffort

最新推荐文章于 2024-04-04 12:01:13 发布

阅读量1.3k

点赞数 3

分类专栏： vue.js

vue.js 专栏收录该内容

120 篇文章 6 订阅

订阅专栏

问题来源：在使用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 以 & 隔开

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