Bug：vue-admin-template二次开发报跨域问题

Bug：vue-admin-template二次开发报跨域问题

1 场景回显

在基于vue-admin-template开发的时候遇到一个问题，就是大家耳熟能详的跨域问题

1.1 后端接口代码

HospitalSetController.java：【修改后】

@Api("医院设置管理")
@RestController
@RequestMapping("/admin/hosp/hospitalSet")
@CrossOrigin(allowCredentials="true",maxAge = 3600)//解决跨域问题[协议、路径（ip）、端口]
public class HospitalSetController {
	/**
	 * 3：条件查询带分页[包括根据id、名称]
	 */
	@PostMapping("/findPageHospSet/{current}/{limit}")
	public Result findPageHospSet(@PathVariable("current") long current,
	                              @PathVariable("limit") long limit,
	                              @RequestBody(required = false) HospitalSetQueryVo hospitalSetQueryVo) {
	
	    //构建条件查询对象
	    QueryWrapper<HospitalSet> queryWrapper = new QueryWrapper<>();
	
	    if(hospitalSetQueryVo != null){
	        //医院编号
	        String hoscode = hospitalSetQueryVo.getHoscode();
	        //医院名称
	        String hosname = hospitalSetQueryVo.getHosname();
	        if (!StringUtils.isEmpty(hoscode)) {
	            queryWrapper.eq("hoscode", hoscode);
	        }
	        if (!StringUtils.isEmpty(hosname)) {
	            queryWrapper.eq("hosname", hosname);
	        }
	    }
	
	    //构建分页对象
	    Page<HospitalSet> page = new Page<>(current, limit);
	    Page<HospitalSet> hospitalSetPage = hospitalSetService.page(page, queryWrapper);
	    return Result.ok(hospitalSetPage);
	}
}

1.2 前端代码

①路由配置index.js

  // 新增路由
  {
    path: '/hospSet',
    component: Layout,
    redirect: '/hospSet/list',
    name: '医院设置管理',
    meta: { title: '医院设置管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '医院设置列表',
        component: () => import('@/views/hospset/list'),
        meta: { title: '医院设置列表', icon: 'table' }
      },
      {
        path: 'add',
        name: '医院设置添加',
        component: () => import('@/views/hospset/add'),
        meta: { title: '医院设置添加', icon: 'tree' }
      }
    ]
  },

②配置api

导入封装好的axios【该文件的路径就是上面新增路由的import路径】

component: () => import('@/views/hospset/list'),

hospset.js:【错误原因】

import request from '@/utils/request'

export default {
    getHospSetList(current, limit, searchObj){
        return request({
            URL: `/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,
            method: 'post',
            data: searchObj //使用json
        })
    }
}

③视图编写

在views下编写对应视图

<template>
  <div class="app-container">
      医院设置列表
  </div>
</template>

<script>
// 引入接口定义的js文件
import hospset from '@/api/hospset'

export default {
    //定义变量和初始值
    data(){
        return {
            current:1,//当前页
            limit:3,//每页显示数据
            searchObj:{},//条件封装对象
            list:[]//每页数据集合
        }
    },
    created() {//在页面渲染之前执行
        //一般调用methods里面定义的方法,得到数据
        this.getList()
        
    },
    methods: { //定义方法，进行请求接口调用
        getList(){
            hospset.getHospSetList(this.current, this.limit, this.searchObj)
            .then(response => {//请求成功, response是接口返回数据
                // 返回集合赋值给list
                // this.
                console.log(response);
            })
            .catch(error => {//请求失败
                console.log(error);
            })
        }
    },
}

</script>

④修改dev配置下的路径

dev.env.js:

后端启动接口是8201，因此改为8201

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
  BASE_API: '"http://localhost:8201"',//不能使用https,因为该项目没有设置权限验证
})

⑤启动项目

启动前端：

npm run dev

启动后端：

1.3 跨域问题出现

这个时候点击我们新增的组件，发现控制台报错

可以看到此时的请求路径就有问题了

2 分析问题原因

此时我的后端项目已经加了@CrossOrigin注解，但依然无效

1. 看网上有的帖子说是@CrossOrigin注解某个版本之后的配置默认为false，需要重新添加配置

@CrossOrigin(allowCredentials="true",maxAge = 3600)//解决跨域问题[协议、路径（ip）、端口]

-- 结果添加之后依然报错

2. 后面发现是自己的请求方式与前端不符合，于是修改

后端：
@GetMapping("/findPageHospSet/{current}/{limit}")

前端：
return request({
    URL: `/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,
    method: 'post',
    data: searchObj //使用json
})

-- 但是依然报错

3. 经过后面详细排查发现是路径配置写错了
   hospset.js:
   
   

因为js是区分大小写的

3 问题解决

js的配置项将"url"写成了"URL" --js区分大小写

4 总结：跨域问题常见错误原因

1. 前后端请求方式不一致
2. 前后端端口不一致
3. @CrossOrigin用法错误

@CrossOrigin(allowCredentials=“true”,maxAge = 3600)//解决跨域问题[协议、路径（ip）、端口]

查看springboot版本，如果是2.0以后版本，allowCredentials属性的默认值为false，返回的响应头
AccessControlAllowCredentials属性值也为false，如果客户端携带cookie的请求这时是不能跨域访问的
，所以需要手动在注解中设置allowCredentials为true
@CrossOrigin(allowCredentials = “true”)

4. js中的某些参数配置错误【此次bug原因，大小写错误】
5. 请求路径配置有误