自定义请求头导致跨域的解决办法

原创于 2025-04-20 22:28:53 发布 · 332 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #springboot

本文仅是记录一下开发碰到的问题，不确定百分百有效。

跨域是什么意思？

跨域问题的根本原因在于浏览器的 同源策略（Same-Origin Policy） 和 跨域资源共享（CORS，Cross-Origin Resource Sharing）机制 的限制

也就是你需要满足三点要求就不会跨域，任意一点不满足就会跨域

协议相同（如 http 或 https）。
域名相同（如 example.com）。
端口号相同（如 80 或 443）。

通常来说跨域在配置文件继承WebMvcConfiguration的类中重写addCorsMappings方法就可以解决

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 对所有路径生效
                .allowedOriginPatterns("*")
                //.allowedOrigins("*") // 允许的域名
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的 HTTP 方法
                .allowedHeaders("*") // 允许的请求头
                .allowCredentials(true) // 是否允许发送 Cookie
                .maxAge(3600); // 预检请求的有效期（单位：秒）
    }

浏览器在发送跨域请求时，默认只允许使用以下标准请求头：
- Accept
- Accept-Language
- Content-Language
- Content-Type（仅限于 application/x-www-form-urlencoded、multipart/form-data 和 text/plain 类型）

如果前端在跨域请求中添加了自定义请求头（如 Access-Token、X-Custom-Header），浏览器会认为这是一个 非简单请求（Non-Simple Request）。
对于非简单请求，浏览器会在实际发送请求之前，先发送一个 预检请求（Preflight Request）（HTTP 方法为 OPTIONS），以确认服务器是否允许该请求
只有当服务器返回正确的 CORS 响应头，允许这些内容时，浏览器才会继续发送实际请求
如果服务器未正确处理预检请求（如未返回 Access-Control-Allow-Headers 或未允许自定义请求头），浏览器会拒绝发送实际请求，并抛出跨域错误

我也在继承WebSecurityConfigurerAdapter的配置类加上了configure方法，但仍然跨域

    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
            .cors().and() // 显式启用 CORS 支持
            .csrf().disable()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
            .authorizeRequests()
            .antMatchers(HttpMethod.OPTIONS, "/**").permitAll() // 放行 OPTIONS 请求
            .anyRequest().authenticated();
    }

最后解决办法是，定义了一个跨域过滤器

import org.springframework.stereotype.Component;

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

/**
 * @Author: Desmond
 * @CreateTime: 2025-04-20
 * @Description: 跨域过滤器
 */
@Component
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        // 允许的域名（根据实际需求修改）
        String origin = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", origin); // 动态设置允许的域名
        response.setHeader("Access-Control-Allow-Credentials", "true"); // 允许携带凭据
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT, OPTIONS"); // 允许的 HTTP 方法
        response.setHeader("Access-Control-Max-Age", "3600"); // 预检请求的有效期
        response.setHeader("Access-Control-Allow-Headers", "Access-Token, Content-Type, Token, Origin, X-Requested-With, Accept"); // 允许的请求头

        // 处理 OPTIONS 请求（预检请求）
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK); // 返回 200 OK
            return;
        }

        // 继续处理其他请求
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // 初始化逻辑（如果需要）
    }

    @Override
    public void destroy() {
        // 销毁逻辑（如果需要）
    }
}

在setHeader中，添加自己的自定义请求头，重启服务发现前端携带请求头可以正常访问了。