springboot+vue踩坑又爬坑之路(跨域、session不一致、vue代理、403问题)

最近公司有新项目,我负责项目架构搭建,经过对业务需求和技术对比,选定springboot2.1.4+vue3.11前后端分离开发框架,本文就前后端分离遇到的问题进行总结.

1.跨域问题

相信这也是很多小伙伴们遇到的最多也最频繁的问题,网上也有很多博客对跨域问题提出多种解决方案:
在这里插入图片描述

@Configuration
public class WebConfigurer implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("forward:/index.html");
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
    }
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOrigins("**")
                // 是否允许证书 不再默认开启
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("GET", "HEAD", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "TRACE")
                // 跨域允许时间
                .maxAge(3600);
    }


}

敲黑板,划重点,一会儿要考试的
这里也确实解决了跨域问题,控制台不报错了,OK

2.vue代理问题

前端发起的请求全部交给了vue的proxy进行处理,在调试的时候,发现了一个很严重的问题,每次请求的session都不一样!坑啊,然后搜vue的代理机制,发现axios跨域访问默认不带cookie,导致每次请求都会生成新的session,翻阅文档,找到了解决方法,就是让axios跨域带cookie就行啦,很简单
在这里插入图片描述

import axios from 'axios';

axios.defaults.withCredentials = true;// 允许跨域携带cookie

加上这句话之后,经过测试,每次携带的sessionId已经一致
这里还有坑,请看继续看填坑之路

3.验证码

刚开始调试,为了方便,将验证码去掉了,等调试验证码的时候,又发现一个很严重的问题,验证码一致验证不成功!what???debug之后,发现携带验证码的session和请求验证码的session不一致…
于是开始排查问题所在,发现,登录验证时候,是由axios发起的请求,而获取验证码的请求,直接走的代理,没有走axios,如图:
在这里插入图片描述
这就很尴尬了,原来vue的proxy也是默认不带cookie的,于是有想办法把cookie加上,尝试了在proxy上获取request和response的header,打算手动设置cookie,结果,获取到了header,但是里面没有cookie,崩溃,然后,偶然间发现一篇博客https://fullsmilespace.com/?p=296 利用cookiePathRewrite重写后端生成cookie的存放路径,然后问题就迎刃而解
在这里插入图片描述

 proxy: {
        '/api': {
            target: 'http://localhost:8081',
            ws: true, //// 是否启用websockets
            changeOrigin: true,
            pathRewrite: {'^/api': '/gotest'},
            cookiePathRewrite: {
                '/gotest': '/'
            }

        }
      }

4.403问题

这也是困扰我很久的一个问题,登录成功之后,访问数据接口,一直包403错误,但是get请求没问题,搜到了一篇博文 https://blog.csdn.net/w770583069/article/details/81777892 ,和我遇到的问题一样,但是按照里面的方法还是没有解决问题,
在这里插入图片描述
response一直返回这个无效的CORS请求,CORS 头缺少 'Access-Control-Allow-Origin,尝试在重写403模块里重写response,经测试还是不行,继续查.还是跨域问题,但是我明明***已经配置了跨域了(见标题1,敲黑板,划重点)***, 控制台也不报错.然后发现,跨域配置错了,汗!感谢@青鸟路过佳诚的博客 https://blog.csdn.net/com_it/article/details/95083104
已拦截跨源请求：同源策略禁止读取位于 http://localhost:8888/api/getnews 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’）。
主要是后端的问题，在springboot中加入下面代码即可:

@Configuration  
public class MyWebMvcConfig implements WebMvcConfigurer {
	@Bean
	public WebMvcConfigurer corsConfigurer() {
		return new WebMvcConfigurer() { 
			@Override
			public void addCorsMappings(CorsRegistry registry) {  
				registry.addMapping("/api/**"); //对应的接口
				}
			};
	}

在这里插入图片描述
原来这里写的 registry.addMapping("/**"),忘记加代理路径了,(见3.验证码 proxy代理部分之pathRewrite),请求发起后,vue会使用代理路径+数据接口发起数据访问流程,在跨域配置里没有加这个代理路径代理就不会生效,之前登录接口没问题是因为登录验证走的security认证,一个疏忽大意,浪费了将近一天时间找问题所在.