axios 发 post 请求，后端接收不到参数的解决方案

使用post发送请求时如何设置content-type的值？
协议规定POST提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的HTTP请求满足上面的格式就可以。

但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如php、python等，以及它们的framework，都内置了自动解析常见数据格式的功能。服务端通常是根据请求头（headers）中的Content-Type

字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。所以说到POST提交数据方案，包含了Content-Type和消息主体编码方式两部分。

1. application/x-www-form-urlencoded最常见的POST提交格式，使用这个编码格式post的数据会以键值对的方式提交。

2. multipart/form-data通常上传图片等文件会使用这种编码格式提交。

3. application/json提交JSON格式的数据。

4. text/plain窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

headers: {'Content-Type': 'application/x-www-form-urlencoded'}

当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。

当action为post时候，浏览器把form数据封装到http body中，然后发送到server。 如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。

一、application/json
axios的post请求，默认是application/json提交JSON格式的数据

写法：

    this.$axios
      .post('http://10.100.0.50:8080/ip/test', {
        ip: 'op'
      })
      .then(res => {
        console.log(res, 222)
      })
    let data = {
      ip: '111'
    }

    this.$axios({
      method: 'post',
      url: 'http://10.100.0.50:8080/ip/test',
      data: data
    }).then(res => {
      console.log(res, 111)
    })

二、application/x-www-form-urlencoded

    const data = new URLSearchParams()
    data.append('text', 'value1')

    this.$axios({
      method: 'post',
      url: 'http://10.100.0.50:8080/ip/test',
      data: data,
    }).then(res => {
      console.log(res, 111)
    })

 

三、multipart/form-data通常上传图片等文件会使用这种编码格式提交。