Tomcat部署前后端分离的CORS跨域配置全指南：静态资源与Spring Boot层实战

上个月帮一个团队处理跨域问题折腾了一下午。他们的项目很典型前端 Vue 打包后丢进 Tomcat 的 webapps 目录后端是 Spring Boot 打的 war 包也部署在同一个 Tomcat 里。开发阶段前端跑在 5173 端口后端在 8080跨域自然天天见。团队在后端加了 CrossOrigin开发环境看着好了部署到线上又开始报错——这次连页面里的字体和 JSON 配置文件都被拦。我梳理了一遍才发现问题出在“跨域配置只覆盖了 Java Web 服务没覆盖 Tomcat 直接提供的静态文件层”而且两边配置还互相打架。这篇整理就围绕 Tomcat 这个典型部署场景把静态文件和 Spring MVC / Spring Boot 服务层“同时允许跨域”的配置方法、选型逻辑和坑位全部过一遍。适合正在用 Tomcat 部署前后端分离项目的人特别是传统 war 包部署、同一容器里既管静态文件又跑接口、还叠了 Spring Security 的团队。1. 跨域不是“后端接口的事”静态请求同样会被浏览器拦1.1 一个典型的前后端分离部署为什么会拦两次先说清楚什么叫跨域。浏览器的同源策略规定只有当协议、域名、端口三者完全一致时才算同源任意一个不同就是跨源。CORS跨源资源共享就是服务器通过响应头告诉浏览器“我允许这个来源读取我的响应”的一套机制。很多人的第一反应是跨域只跟接口有关给后端接口配好 CORS 头就行。这个认知在“静态文件和 Java Web 服务都在同一个 Tomcat、同一个端口下”的时候基本成立因为同源。但实际部署往往比这复杂前端页面 http://localhost:5173/开发 - http://localhost:8080/api 端口不同跨域 前端页面 https://www.example.com/ - https://api.example.com/ 子域名不同跨域 前端页面 http://www.example.com/ - http://static.example.com/ 静态资源独立域名跨域我遇到最多的几个真实场景前端打包后的 index.html 在 Tomcat 的 ROOT 下但接口在另一个虚拟主机或另一个端口上。页面在 A 服务器静态资源图片、字体、JS 的异步加载、JSON 配置文件通过 fetch/XHR 去 B 服务器拉取。字体文件。font-face 加载跨域字体时浏览器也会走 CORS 校验。很多站点页面加载时报“字体跨域”错误就是这个原因。注意 、