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 等字段，这样跨域请求才能顺利执行。