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

Dear 丶 2024-04-06 13:01 67阅读 0赞

## 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' }
          }
        ]
      },

![在这里插入图片描述][b30f6bc1654e4fdca0c5b3df97e8de9d.png]

##### ②配置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
            })
        }
    }

![在这里插入图片描述][d5c837d293ae43f6a60b886621154d05.png]

##### ③视图编写 #####

在views下编写对应视图  
![在这里插入图片描述][9957bae20cb14497b089708c7a78abb1.png]

<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配置下的路径 #####

![在这里插入图片描述][e8ab98ed2dad428b96be625cc800ce8e.png]  
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,因为该项目没有设置权限验证
    })

##### ⑤启动项目 #####

启动前端：  
![在这里插入图片描述][78e787e31915454bbbe3fcc4cdaf12a2.png]

npm run dev

启动后端：  
![在这里插入图片描述][a8ca41200c024ef580cb19142acd633a.png]

#### 1.3 跨域问题出现 ####

这个时候点击我们新增的组件，发现控制台报错  
![在这里插入图片描述][bda0068be470417db1922e827ab69953.png]  
![在这里插入图片描述][db3055e337b647d98a9fb4f42b491dec.png]

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

### 2 分析问题原因 ###

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

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

@CrossOrigin(allowCredentials="true",maxAge = 3600)//解决跨域问题[协议、路径（ip）、端口]
    
    -- 结果添加之后依然报错

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

后端：
    @GetMapping("/findPageHospSet/{current}/{limit}")
    
    前端：
    return request({
        
        URL: `/admin/hosp/hospitalSet/findPageHospSet/${
         current}/${
         limit}`,
        method: 'post',
        data: searchObj //使用json
    })
    
    -- 但是依然报错

1.  经过后面详细排查发现是路径配置写错了  
    hospset.js:  
    ![在这里插入图片描述][6c798fbf9b1843aabcf4230d97343166.png]  
    ![在这里插入图片描述][548e85c5e41f4e37a8afddee6237274c.png]

因为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”)

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

[b30f6bc1654e4fdca0c5b3df97e8de9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7e92360c6dd74f84903695138d012f12.png
[d5c837d293ae43f6a60b886621154d05.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7e04b089d88c40c9950508f636ffd4b0.png
[9957bae20cb14497b089708c7a78abb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/06b83d6b3dfb4c0f89d90060b25c7ae5.png
[e8ab98ed2dad428b96be625cc800ce8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6f63a9fc910b4487b2139346fa7c02c6.png
[78e787e31915454bbbe3fcc4cdaf12a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f4481005733f45bdba190682f30e374c.png
[a8ca41200c024ef580cb19142acd633a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f8d34824f8be40dc88e5a7cbcf32e677.png
[bda0068be470417db1922e827ab69953.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/388f7f5c79294322bed7731d85e454f6.png
[db3055e337b647d98a9fb4f42b491dec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2769cd50fa944fa08ac52ef01ec5a3e6.png
[6c798fbf9b1843aabcf4230d97343166.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ee5170c9a07543339970b1106b082f10.png
[548e85c5e41f4e37a8afddee6237274c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9714ceb8a44c49258a567bd5df6be11c.png