当前位置：首页 > backend >正文

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

backend 2025/5/19 5:14:48

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

跨域是什么意思？

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

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

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

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

    @Overridepublic 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方法，但仍然跨域

    @Overrideprotected 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 {@Overridepublic 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 OKreturn;}// 继续处理其他请求chain.doFilter(req, res);}@Overridepublic void init(FilterConfig filterConfig) throws ServletException {// 初始化逻辑（如果需要）}@Overridepublic void destroy() {// 销毁逻辑（如果需要）}
}

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

查看全文

http://www.xdnf.cn/news/719.html