SmartAdmin（基于 Spring Boot 框架）中配置跨域请求 VUE3 设置请求头

在 SmartAdmin基于 Spring Boot 框架中配置跨域请求通常在后端通过以下几种常见方式进行设置。你可以根据项目的实际需求选择最合适的一种1. 全局配置推荐通过实现WebMvcConfigurer接口来配置全局跨域规则。这种方式可以统一设置允许的请求路径、请求方法、凭证携带和缓存时间等非常适合前后端分离的后台管理系统。2. 使用 CrossOrigin 注解如果只需要针对特定的 Controller 或某个具体的接口开放跨域可以直接在启动类、Controller 类或具体的方法上添加CrossOrigin注解。这种方式配置简单但作用范围较小。3. 创建 CORS 过滤器通过自定义或配置 Spring 提供的 CORS 过滤器如CorsFilter在请求拦截阶段直接设置跨域响应头。这种方式在请求处理的最早期生效能够拦截更多的请求类型。4. 在配置文件中声明在 Spring Boot 的配置文件如application.yml中直接声明跨域参数这种方式配置直观便于在不同环境如开发、生产中灵活切换。⚠️ 生产环境配置注意事项在将 SmartAdmin 部署到生产环境时跨域配置需要特别注意以下两点指定具体域名生产环境中应指定具体的允许域名切勿使用通配符*以防止恶意网站伪造请求。凭证携带如果跨域请求需要携带凭证如 Cookie、Token在启用凭证时必须明确指定具体的域名而不能使用通配符。同时前端Vue3 Vite也需要根据后端的跨域配置正确调整请求头设置以确保跨域请求能够正常执行。在 Vue3 中设置跨域请求头通常结合 Axios 请求库来实现。你可以通过全局默认配置、Axios 拦截器或单次请求配置三种方式来添加自定义请求头如Authorization、Content-Type等。以下是具体的设置方法1. 全局默认配置适用于所有请求如果你希望在项目的每个请求中都自动携带相同的请求头可以直接修改 Axios 的默认配置。这种方式无需为每个请求单独设置适合添加通用的身份验证信息或内容类型import axios from axios; // 设置全局默认的 Authorization 头 axios.defaults.headers.common[Authorization] Bearer token123; // 设置 POST 请求默认的 Content-Type axios.defaults.headers.post[Content-Type] application/json;2. 使用 Axios 拦截器推荐在 Vue3 项目的实际开发中最推荐的做法是使用请求拦截器。拦截器会在请求发送前统一处理非常适合用来动态获取并注入 Token或者统一处理请求头格式import axios from axios; // 创建 Axios 实例 const service axios.create(); // 请求拦截器 service.interceptors.request.use( (config) { // 从本地存储中动态获取 Token const token localStorage.getItem(token); if (token) { // 按照后端约定的格式添加 Authorization 请求头 config.headers.Authorization Bearer ${token}; } return config; }, (error) { return Promise.reject(error); } );3. 单次请求配置适用于特定请求如果某些特殊的请求头只针对某一个特定的接口可以在发起请求时通过请求配置对象的headers属性进行单独指定import axios from axios; axios.get(https://example.com/api/data, { headers: { Content-Type: application/json, Authorization: Bearer token123 } }).then(response { console.log(response.data); }).catch(error { console.error(error); });⚠️ 跨域请求头的关键注意事项在跨域场景下前端成功添加了自定义请求头后服务器端也必须进行相应的配置否则请求会被浏览器的 CORS 策略拦截预检请求Preflight当发送带有自定义请求头如Authorization的跨域请求时浏览器会先发送一个OPTIONS预检请求询问服务器是否允许这些头信息。后端响应头配置服务器必须在响应头中明确允许前端发送的自定义头字段。例如需要在后端配置Access-Control-Allow-Headers将其值设置为允许Content-Type和Authorization等字段这样跨域请求才能顺利执行。