前后端分离项目中跨域问题是最常见的拦路虎。这篇讲 SpringBoot 中三种解决跨域的方式以及 Filter 和 Interceptor 的区别与使用场景。一、什么是跨域1. 跨域的产生前端地址http://localhost:8080 后端地址http://localhost:9090 ↑ 端口不同产生了跨域 浏览器的同源策略 协议相同、域名相同、端口相同 → 同源 任何一个不同 → 跨域2. 跨域的表现浏览器控制台报错 Access to XMLHttpRequest at http://localhost:9090/api/users from origin http://localhost:8080 has been blocked by CORS policy二、三种跨域解决方案方案一CrossOrigin 注解最简单的方式在 Controller 或方法上加注解RestControllerRequestMapping(/api/users)CrossOrigin(originshttp://localhost:8080)publicclassUserController{// 整个类都允许跨域}// 或者只允许某个方法跨域GetMapping(/{id})CrossOrigin(origins*)// 允许所有来源publicResultVOUserget(PathVariableLongid){returnResultVO.success(userService.getById(id));}缺点每个 Controller 都要加维护麻烦。方案二全局配置推荐ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/api/**)// 允许跨域的路径.allowedOriginPatterns(*)// 允许的域名.allowedMethods(GET,POST,PUT,DELETE,OPTIONS).allowedHeaders(*).allowCredentials(true)// 允许携带 Cookie.maxAge(3600);// 预检请求缓存时间}}注意allowCredentials(true)和allowedOriginPatterns(*)必须同时使用不能单独用allowedOrigins(*)否则会报错。方案三Filter 手动处理ComponentOrder(1)publicclassCorsFilterimplementsFilter{OverridepublicvoiddoFilter(ServletRequestrequest,ServletResponseresponse,FilterChainchain)throwsIOException,ServletException{HttpServletResponseresp(HttpServletResponse)response;resp.setHeader(Access-Control-Allow-Origin,*);resp.setHeader(Access-Control-Allow-Methods,GET,POST,PUT,DELETE,OPTIONS);resp.setHeader(Access-Control-Allow-Headers,*);resp.setHeader(Access-Control-Max-Age,3600);// 预检请求直接返回if(OPTIONS.equalsIgnoreCase(((HttpServletRequest)request).getMethod())){resp.setStatus(HttpServletResponse.SC_OK);return;}chain.doFilter(request,response);}}三、Filter vs Interceptor对比Filter过滤器Interceptor拦截器层级Servlet 层面Spring 层面范围所有请求只有进入 Controller 的请求操作HttpServletRequest/Response方法调用前后处理使用场景CORS、编码、鉴权 Token 校验登录校验、日志记录、权限验证Filter 典型场景请求日志ComponentOrder(2)publicclassRequestLogFilterimplementsFilter{privatestaticfinalLoggerlogLoggerFactory.getLogger(RequestLogFilter.class);OverridepublicvoiddoFilter(ServletRequestrequest,ServletResponseresponse,FilterChainchain)throwsIOException,ServletException{HttpServletRequestreq(HttpServletRequest)request;longstartSystem.currentTimeMillis();chain.doFilter(request,response);longdurationSystem.currentTimeMillis()-start;log.info({} {} {} - {}ms,req.getMethod(),req.getRequestURI(),response.getContentType(),duration);}}Interceptor 典型场景登录校验ComponentpublicclassLoginInterceptorimplementsHandlerInterceptor{OverridepublicbooleanpreHandle(HttpServletRequestrequest,HttpServletResponseresponse,Objecthandler)throwsException{// 从请求头获取 TokenStringtokenrequest.getHeader(Authorization);if(tokennull||token.isEmpty()){response.setStatus(401);response.setContentType(application/json);response.getWriter().write({\code\:401,\message\:\未登录\});returnfalse;}// 校验 Token省略具体逻辑// if (!TokenUtil.validate(token)) { return false; }returntrue;}}ConfigurationpublicclassInterceptorConfigimplementsWebMvcConfigurer{AutowiredprivateLoginInterceptorloginInterceptor;OverridepublicvoidaddInterceptors(InterceptorRegistryregistry){registry.addInterceptor(loginInterceptor).addPathPatterns(/api/**).excludePathPatterns(/api/login,/api/register,/doc.html);}}四、XSS 过滤器ComponentOrder(3)publicclassXssFilterimplementsFilter{OverridepublicvoiddoFilter(ServletRequestrequest,ServletResponseresponse,FilterChainchain)throwsIOException,ServletException{chain.doFilter(newXssHttpServletRequestWrapper((HttpServletRequest)request),response);}/** * 包装请求过滤 XSS 脚本 */staticclassXssHttpServletRequestWrapperextendsHttpServletRequestWrapper{publicXssHttpServletRequestWrapper(HttpServletRequestrequest){super(request);}OverridepublicStringgetParameter(Stringname){Stringvaluesuper.getParameter(name);returncleanXss(value);}OverridepublicString[]getParameterValues(Stringname){String[]valuessuper.getParameterValues(name);if(valuesnull)returnnull;String[]cleanednewString[values.length];for(inti0;ivalues.length;i){cleaned[i]cleanXss(values[i]);}returncleaned;}privateStringcleanXss(Stringvalue){if(valuenull)returnnull;// 过滤常见 XSS 关键字valuevalue.replaceAll(script,).replaceAll(/script,).replaceAll(onerror,).replaceAll(onclick,);returnvalue;}}}五、Filter 的执行顺序/** * 多个 Filter 的执行顺序 * * CorsFilterOrder(1)→ RequestLogFilterOrder(2)→ XssFilterOrder(3) * ↓ * DispatcherServlet → InterceptorpreHandle * ↓ * Controller * ↓ * InterceptorpostHandle * ↓ * InterceptorafterCompletion * ↓ * Filter反向执行 */执行顺序请求进来 → CorsFilter.doFilter() → RequestLogFilter.doFilter() → XssFilter.doFilter() → LoginInterceptor.preHandle() → Controller 方法 → LoginInterceptor.afterCompletion() → XssFilter.doFilter() 结束 → RequestLogFilter.doFilter() 结束 → CorsFilter.doFilter() 结束 → 响应返回六、常见问题1. OPTIONS 预检请求浏览器在发送真正的跨域请求之前会先发一个 OPTIONS 请求 检查服务器是否允许跨域 如果 OPTIONS 请求没有正常返回真正的请求也不会发出2. 携带 Cookie 的跨域// 前端需要设置axios.defaults.withCredentialstrue;// 后端不能使用 allowedOrigins(*)// 必须指定具体的域名allowedOriginPatterns(http://localhost:8080)allowCredentials(true)3. Nginx 解决跨域server { listen 80; location /api/ { proxy_pass http://localhost:9090/; # 跨域配置 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; if ($request_method OPTIONS) { return 204; } } }七、秒杀系统的跨域配置ConfigurationpublicclassSeckillWebConfigimplementsWebMvcConfigurer{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/api/**).allowedOriginPatterns(*).allowedMethods(GET,POST,PUT,DELETE).allowCredentials(true).maxAge(3600);}OverridepublicvoidaddInterceptors(InterceptorRegistryregistry){registry.addInterceptor(newSeckillInterceptor()).addPathPatterns(/api/seckill/**).excludePathPatterns(/api/seckill/init/**);}}总结简单跨域 → CrossOrigin临时调试用 生产环境 → 全局 CORS 配置WebMvcConfigurer 特殊需求 → Filter 手动处理 权限校验 → InterceptorSpring 层面更灵活 觉得有用的话点赞 关注【张老师技术栈】吧每周更新 Java/Python/爬虫 实战干货不让你白来。
前后端分离项目中跨域问题是最常见的拦路虎。这篇讲 SpringBoot 中三种解决跨域的方式以及 Filter 和 Interceptor 的区别与使用场景。一、什么是跨域1. 跨域的产生前端地址http://localhost:8080 后端地址http://localhost:9090 ↑ 端口不同产生了跨域 浏览器的同源策略 协议相同、域名相同、端口相同 → 同源 任何一个不同 → 跨域2. 跨域的表现浏览器控制台报错 Access to XMLHttpRequest at http://localhost:9090/api/users from origin http://localhost:8080 has been blocked by CORS policy二、三种跨域解决方案方案一CrossOrigin 注解最简单的方式在 Controller 或方法上加注解RestControllerRequestMapping(/api/users)CrossOrigin(originshttp://localhost:8080)publicclassUserController{// 整个类都允许跨域}// 或者只允许某个方法跨域GetMapping(/{id})CrossOrigin(origins*)// 允许所有来源publicResultVOUserget(PathVariableLongid){returnResultVO.success(userService.getById(id));}缺点每个 Controller 都要加维护麻烦。方案二全局配置推荐ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/api/**)// 允许跨域的路径.allowedOriginPatterns(*)// 允许的域名.allowedMethods(GET,POST,PUT,DELETE,OPTIONS).allowedHeaders(*).allowCredentials(true)// 允许携带 Cookie.maxAge(3600);// 预检请求缓存时间}}注意allowCredentials(true)和allowedOriginPatterns(*)必须同时使用不能单独用allowedOrigins(*)否则会报错。方案三Filter 手动处理ComponentOrder(1)publicclassCorsFilterimplementsFilter{OverridepublicvoiddoFilter(ServletRequestrequest,ServletResponseresponse,FilterChainchain)throwsIOException,ServletException{HttpServletResponseresp(HttpServletResponse)response;resp.setHeader(Access-Control-Allow-Origin,*);resp.setHeader(Access-Control-Allow-Methods,GET,POST,PUT,DELETE,OPTIONS);resp.setHeader(Access-Control-Allow-Headers,*);resp.setHeader(Access-Control-Max-Age,3600);// 预检请求直接返回if(OPTIONS.equalsIgnoreCase(((HttpServletRequest)request).getMethod())){resp.setStatus(HttpServletResponse.SC_OK);return;}chain.doFilter(request,response);}}三、Filter vs Interceptor对比Filter过滤器Interceptor拦截器层级Servlet 层面Spring 层面范围所有请求只有进入 Controller 的请求操作HttpServletRequest/Response方法调用前后处理使用场景CORS、编码、鉴权 Token 校验登录校验、日志记录、权限验证Filter 典型场景请求日志ComponentOrder(2)publicclassRequestLogFilterimplementsFilter{privatestaticfinalLoggerlogLoggerFactory.getLogger(RequestLogFilter.class);OverridepublicvoiddoFilter(ServletRequestrequest,ServletResponseresponse,FilterChainchain)throwsIOException,ServletException{HttpServletRequestreq(HttpServletRequest)request;longstartSystem.currentTimeMillis();chain.doFilter(request,response);longdurationSystem.currentTimeMillis()-start;log.info({} {} {} - {}ms,req.getMethod(),req.getRequestURI(),response.getContentType(),duration);}}Interceptor 典型场景登录校验ComponentpublicclassLoginInterceptorimplementsHandlerInterceptor{OverridepublicbooleanpreHandle(HttpServletRequestrequest,HttpServletResponseresponse,Objecthandler)throwsException{// 从请求头获取 TokenStringtokenrequest.getHeader(Authorization);if(tokennull||token.isEmpty()){response.setStatus(401);response.setContentType(application/json);response.getWriter().write({\code\:401,\message\:\未登录\});returnfalse;}// 校验 Token省略具体逻辑// if (!TokenUtil.validate(token)) { return false; }returntrue;}}ConfigurationpublicclassInterceptorConfigimplementsWebMvcConfigurer{AutowiredprivateLoginInterceptorloginInterceptor;OverridepublicvoidaddInterceptors(InterceptorRegistryregistry){registry.addInterceptor(loginInterceptor).addPathPatterns(/api/**).excludePathPatterns(/api/login,/api/register,/doc.html);}}四、XSS 过滤器ComponentOrder(3)publicclassXssFilterimplementsFilter{OverridepublicvoiddoFilter(ServletRequestrequest,ServletResponseresponse,FilterChainchain)throwsIOException,ServletException{chain.doFilter(newXssHttpServletRequestWrapper((HttpServletRequest)request),response);}/** * 包装请求过滤 XSS 脚本 */staticclassXssHttpServletRequestWrapperextendsHttpServletRequestWrapper{publicXssHttpServletRequestWrapper(HttpServletRequestrequest){super(request);}OverridepublicStringgetParameter(Stringname){Stringvaluesuper.getParameter(name);returncleanXss(value);}OverridepublicString[]getParameterValues(Stringname){String[]valuessuper.getParameterValues(name);if(valuesnull)returnnull;String[]cleanednewString[values.length];for(inti0;ivalues.length;i){cleaned[i]cleanXss(values[i]);}returncleaned;}privateStringcleanXss(Stringvalue){if(valuenull)returnnull;// 过滤常见 XSS 关键字valuevalue.replaceAll(script,).replaceAll(/script,).replaceAll(onerror,).replaceAll(onclick,);returnvalue;}}}五、Filter 的执行顺序/** * 多个 Filter 的执行顺序 * * CorsFilterOrder(1)→ RequestLogFilterOrder(2)→ XssFilterOrder(3) * ↓ * DispatcherServlet → InterceptorpreHandle * ↓ * Controller * ↓ * InterceptorpostHandle * ↓ * InterceptorafterCompletion * ↓ * Filter反向执行 */执行顺序请求进来 → CorsFilter.doFilter() → RequestLogFilter.doFilter() → XssFilter.doFilter() → LoginInterceptor.preHandle() → Controller 方法 → LoginInterceptor.afterCompletion() → XssFilter.doFilter() 结束 → RequestLogFilter.doFilter() 结束 → CorsFilter.doFilter() 结束 → 响应返回六、常见问题1. OPTIONS 预检请求浏览器在发送真正的跨域请求之前会先发一个 OPTIONS 请求 检查服务器是否允许跨域 如果 OPTIONS 请求没有正常返回真正的请求也不会发出2. 携带 Cookie 的跨域// 前端需要设置axios.defaults.withCredentialstrue;// 后端不能使用 allowedOrigins(*)// 必须指定具体的域名allowedOriginPatterns(http://localhost:8080)allowCredentials(true)3. Nginx 解决跨域server { listen 80; location /api/ { proxy_pass http://localhost:9090/; # 跨域配置 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; if ($request_method OPTIONS) { return 204; } } }七、秒杀系统的跨域配置ConfigurationpublicclassSeckillWebConfigimplementsWebMvcConfigurer{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/api/**).allowedOriginPatterns(*).allowedMethods(GET,POST,PUT,DELETE).allowCredentials(true).maxAge(3600);}OverridepublicvoidaddInterceptors(InterceptorRegistryregistry){registry.addInterceptor(newSeckillInterceptor()).addPathPatterns(/api/seckill/**).excludePathPatterns(/api/seckill/init/**);}}总结简单跨域 → CrossOrigin临时调试用 生产环境 → 全局 CORS 配置WebMvcConfigurer 特殊需求 → Filter 手动处理 权限校验 → InterceptorSpring 层面更灵活 觉得有用的话点赞 关注【张老师技术栈】吧每周更新 Java/Python/爬虫 实战干货不让你白来。
