记一次option请求与jwt过滤器冲突引起的跨域问题(CORS Missing Allow Origin)

前端：vue3 + axios + … (http://localhost:8080)
后端 ：springboot + jwt +…(http://localhost)
因为端口不同，会发生跨域问题，所以后端加入@CrossOrigin即可。

1.在前端用户登录后进行数据请求时报以下错误：

• 已拦截跨源请求：同源策略禁止读取位于 http://localhost/?t=1669470865764 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’）。状态码：200。
• 请注意：这里是登录后发生，登录时没有问题。

2.于是后端controller方法加入注解：@CrossOrigin

• 经测试无效、无效、无效

3.问题的排查与处理

• 既然都后端都加了Access-Control-Allow-Headers:*那应该不会有跨域问题，因为登录功能正常，现在问题发生在登录后的请求，那应该考虑是jwt校验造成的。于是在jwt的过滤器中下断点：发现拦截了option方法。因为option请求中并不会携带token所以无法进入controller方法内，那方法上的跨域配置也就无效了。所以可以jwt过滤器中加入以下判断即可 ：

if ("OPTIONS".equals(request.getMethod())) {
			String requestHeader = request.getHeader("Access-Control-Request-Headers");
			if(requestHeader !=null) {
				response.addHeader("Access-Control-Allow-Headers", requestHeader );
			}
			response.addHeader("Access-Control-Allow-Origin", "*");
			return; 
		}

当然，如果使用了jwt拦截器，在preHandle中放行option请求即可。