vue 前后端分离 axios 跨域 配置

vue +ssm 前后端分离,所以肯定涉及跨域请求.. 以及后端如何接受参数

 先说一下我的环境  :  vue/cli- 4.3.0  + ssm .废话不说,开始

第一步:vue.config.js文件配置如下(vue 脚手架4版本以上)

devServer: {
    port:8081,
    host:'127.0.0.1',
    https:false,
    proxy: {
        '/api': { //注意这里 /api 不是随便写,请求路径中得包涵.
            target: 'http://localhost:8080/spring_web_war_exploded/', //这是后台地址 
            changeOrigin: true,
            ws: true,
            pathRewrite: { '^/api': '' }
        }
    }
},

 第二步:axios 封装如下:

const service = axios.create({
  withCredentials: true,// 指定某个请求应该发送凭据。允许客户端携带跨域cookie，也需要此配置
  timeout: 5000 // request timeout
})

第三步:axios请求调用

export function doLogin(data) {
  const params = new URLSearchParams();
  params.append('username', 'hello');
  params.append('password', '2');
  return request({
    url: '/api/loginController/doLogin.do',
    method: 'post',
     data:params
  })
}

第四步:后台接收(ssm框架)

@CrossOrigin
@PostMapping(value = "/doLogin")
public ResultVo login( String username ,String password ) {
    try {
        if (  ParamUtil.isEmpty(username) || ParamUtil.isEmpty(password)) {
            return ResultVo.error("提交信息错误，数据缺失");
        }
        List<User> list = userService.getUserInfo(username);
        if (list.size() == 0) {
            return ResultVo.error("用户名:"+username+"不存在");
        }
...省略
}

 

注意:我在vue.config.js配置了代理服务,所以浏览器开发者模式下查看访问路径,无法查看到代理路径:http://localhost:8080/spring_web_war_exploded/

代理服务可以这样理解,axios 无法直接跨域访问后台服务(脚本安全协议决定的),后台服务与后台服务直接调用,代理就相当于模拟后台服务访问,所以浏览器调试模式无法直接看到代理地址,

写的匆忙,如有错误,请留言.