在Axios中设置自定义请求头后Java后端遇CORS问题求助

你遇到的CORS问题根源是：自定义请求头appName属于非简单请求，浏览器会先发送OPTIONS预检请求验证后端是否允许该头字段，若后端未配置相关规则，就会触发跨域错误。以下是具体配置方案：

后端配置（以Spring Boot为例） #

1. 全局CORS配置（推荐，适配多前端应用） #

创建全局配置类，统一允许自定义头并处理预检请求：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 生产环境建议指定具体前端域名，比如"https://app1.example.com", "https://app2.example.com"
        config.addAllowedOriginPattern("*");
        config.addAllowedMethod("*"); // 允许所有请求方法
        config.addAllowedHeader("appName"); // 必须明确允许自定义头
        config.setAllowCredentials(true); // 若前端需要携带cookie等凭证，开启此项
        config.addExposedHeader("appName"); // 可选：允许前端读取响应头中的该字段

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config); // 对所有API接口生效
        return new CorsFilter(source);
    }
}

2. 控制器级别配置（针对单个接口/控制器） #

如果仅需给特定接口开放跨域，在控制器或方法上添加注解：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;

@RestController
@CrossOrigin(allowedHeaders = "appName", origins = "*") // 指定允许的头和域名
public class ApiController {
    @GetMapping("/api/getData")
    public String getData(HttpServletRequest request) {
        String appName = request.getHeader("appName");
        // 业务逻辑处理
        return "请求来源应用：" + appName;
    }
}

3. 自定义Filter处理（非Spring原生方案） #

若不用Spring的CorsFilter，可手动编写过滤器处理预检请求：

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CustomCorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, appName"); // 包含自定义头
        response.setHeader("Access-Control-Max-Age", "3600"); // 预检请求缓存时长，减少重复请求
        response.setHeader("Access-Control-Allow-Credentials", "true");

        // 直接响应OPTIONS预检请求，无需转发到业务接口
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            return;
        }
        chain.doFilter(req, res);
    }
}

需在web.xml或Spring配置中注册该过滤器。

前端Axios配置优化 #

原代码直接覆盖request.headers可能丢失默认请求头，建议改为追加方式：

axios.interceptors.request.use((request) => {
  console.log("request :", request);
  // 追加自定义头，而非覆盖整个headers对象
  request.headers['appName'] = "Databook";
  return request;
});

验证步骤 #

1. 打开浏览器开发者工具（F12）→ Network面板
2. 发起API请求，检查是否存在OPTIONS预检请求
3. 查看OPTIONS请求的响应头：
   • Access-Control-Allow-Headers必须包含appName
   • Access-Control-Allow-Origin与前端域名匹配
4. 确认后续实际请求正常发送，后端可成功获取appName字段

内容的提问来源于stack exchange，提问作者Tarun Kumar