如何解决vue cli和spring boot前后端分离后的跨域请求问题

勤奋上进的兔子

已于 2023-05-07 18:32:06 修改

阅读量170

点赞数

于 2022-11-22 20:25:20 首次发布

本文链接：https://blog.csdn.net/qq_55648724/article/details/127988791

版权

spring boot 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

前言

一、跨域问题是什么？

跨域问题: 从一个域向另一个域发生请求。可能会产生跨域问题。

跨域产生的前提:

（1）必须使用了ajax请求

(2) 不同域。【协议不同 | ip不同 | port不同】

这次我们的前端端口8080 后端端口80

二、解决方案

1.添加spring boot配置类

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
 
    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

2.前端解决

Vue项目的url：http://localhost:8080/
本地后台所在: http://localhost:8088/

找到vue cli项目的下的 vue.config.js 文件（没有就新建），然后在里面输入以下代码：

//在根目录下创建vue.config.js,如下配置：
module.exports = {
    devServer: {
        //跨域
        proxy: {
            '/api': {
                target: 'http://localhost:8088/', //路径指向(spring boot项目)本地主机地址及端口号
                changOrigin: true,//准许跨域
                //路径重写
                pathRewrite: {
            //重写路径，当我们在浏览器中看到请求的地址为：
            //http://localhost:8080/api/* 时
            //实际上访问的地址是项目的地址：
            //http://localhost:8088/
            //因为重写了 /api
                    '^/api': '' //路径转发代理
                }
            }
        }
    }
}

配置之后如何使用

第一步在main.js里面配置挂载全局变量

Vue.prototype.HOST = '/api';

各个组件使用举例一个
<script>
    import student from "@/views/student";
    export default {
        name: "home",
        components:{
            student
        },
        methods:{
            getname(){
                this.axios.get(this.HOST+"后端控制层请求").then(resp=>{
                    //逻辑代码展示前端
                })
            }
        }

    }
</script>