springboot+vue前后端分离跨域问题

大大源码 • 2023年3月15日 pm9:43 • 其他

springboot+vue前后端分离跨域问题

在假期的时候学习了springboot，因为以前学习过vue，所以在实战的时候就直接上手了springboot+vue的项目，在做的时候朋友说对于前后端分离的项目会涉及到跨域的问题，果不其然，我也在跨域问题上卡了一点时间，但是还是解决了。我所用的方案也不是最好的，仅作参考。

错误演示

当前端向后端发起请求的时候，会发生如下报错，但是经过检查，发现地址都没有错。根据错误码可以知道是没有找到路径。

Uncaught (in promise) Error: Request failed with status code 404

我们先说一下什么是同源策略，同源就是指两个页面具有相同的协议，主机，端口，三个要素缺一不可。
就比如http://localhost:8091与http://localhost:7077就不是同源，因为他们的端口号不同。
了解了springboot和vue的小伙伴都知道，springboot有自己的端口号，而vue也有自己的端口号，但一个端口只能运行一个项目，所以要想两个项目都可以运行就必须使用不同的端口，使用了不同的端口，vue请求springboot的接口就涉及到了跨域。

解决办法

对于跨域问题，其实有蛮多方法的，我当时也在网上找了一些方法，起初没有看得懂，反正也用了很久的时间才弄懂，我就在这里分享一下我的经验，希望能对小伙伴有帮助。
1、第一种方法是我使用的最多的方法，能够解决大部分的前后端分离跨域问题。
首先在vue项目的根路径新建一个vue.config.js文件，若是有就可以不用新建。然后在devServer节点中新建一个proxy节点，在proxy节点中就开始写跨域的配置。

// 跨域配置
module.exports = {
    devServer: {
        open:true,
        port: 8091,
        proxy: {    //设置代理，必须填
            '/proxy': {   //设置拦截器  拦截器格式：斜杠+拦截器名
                target: 'http://localhost:8090',   //代理的目标地址
                changeOrigin: true,     //是否设置同源，输入是的
                pathRewrite: {     //路径重写
                    '^/proxy': '' //选择忽略拦截器里面的内容
                }
            }
        }
    }
}

然后在项目的src目录下新建一个utils文件夹，里面新建一个request.js文件（当然，你在其他目录建也行，换一个名字也行），里面的代码如下，这其实也是在网上找的。

import axios from 'axios'

const request = axios.create({
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
export default request

这一步完成后，我们就可以去使用了。
在使用前，先在script标签中导入这个js文件。
在这里插入图片描述

在发起请求的时候就用request发起请求。
在这里插入图片描述
注意，在发起请求的时候，一定要在你的原来的地址上加上/proxy，因为我们在vue.config.js已经对请求进行了配置，只要请求里面含有/proxy就会被拦截下来，然后通过代理访问代理中设置的地址。
2、上面那种方法已经可以应对许多场景了，但是我遇到一种场景无法使用上面那种方法，所以就需要使用另外一种方法。
例如，上传文件。我使用的是element里面的一个文件上传组件。
在这里插入图片描述
我直接在组件内就已经写好了上传的地址，根本用不到request.js发起请求，所以也会发生404。
对于这种情况的话，在前端我没有什么好的想法，所以我们就在后端下功夫。
在后端项目中新建一个配置类CorsConfig，代码如下：

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