前后端分离后请求问题+vue+axios

后端用的框架是 spring mvc ，并且在这个方法上使用了注解 @RequestParam，这个就只能从请求的地址中取出参数，也就是只能从 username=admin&pwd=11111 这种字符串中解析出参数，也就是编码格式（content-type）为：application/x-www-form-urlencode。（表单form的enctype属性的编码方式有两种：application/x-www-form-urlencode和multipart/form-data），但是axios会把请求的数据转换成json格式，即为：application/json;charset=UTF-8
链接：https://www.jianshu.com/p/961a4c97e057

我在项目中遇到了同样的问题，所以采用以下的方式解决请求人体

一、在axios中，改变Content-Type为application/x-www-form-urlencode

步骤一：引用QS（qs是axios自带的，直接引入使用即可）

import Qs from 'qs'

步骤二：json格式数据转换： params = Qs.stringify(params);

if (params) {
    params = Qs.stringify(params);
  }

步骤三：设置Content-Type： 'application/x-www-form-urlencoded'

axios({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,
    baseURL: root,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
withCredentials: false
  })

1.1通常情况下，直接使用axios默认的 'Content-Type': 'application/json;charset=UTF-8' 不需要额外的设置。

java服务端用的是 @RequestParam（通过字符串解析出参数） ，其实还有另一种是 @RequestBody（从请求体中获取参数），让后端改成 @RequestBody就可以使用axios默认的 'Content-Type': 。

2、注意前后端分离进行调试经常会报错，在网上搜索会有很多的解决方法。

但是必须注意的是（必须两台电脑无防火墙隔离、在同一工作组，使用ping对方的ip地址，ping通即可）然后再通过代码。

image.png