React请求带Authorization头时触发CORS预检错误排查求助

当请求携带Authorization头时，浏览器会自动发起OPTIONS预检请求，用来确认服务器是否允许这个带自定义头的请求。你之前仅在正常GET请求中设置了CORS头，但未处理OPTIONS请求，导致预检请求的响应里没有Access-Control-Allow-Origin等必要头，浏览器因此拦截后续真实请求，抛出你看到的错误。而Postman不会触发预检请求，所以调用正常。

你需要确保Java后端正确处理OPTIONS预检请求，并返回完整的CORS配置头：

1. 实现CORS Filter处理所有请求（包括OPTIONS） #

创建一个CORS Filter类，统一处理所有请求的CORS头，重点处理OPTIONS请求：

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

public class CorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

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

        // 允许的源，也可替换为React应用具体域名，比如"https://your-react-app.com"
        response.setHeader("Access-Control-Allow-Origin", "*");
        // 允许的HTTP方法
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        // 必须明确包含Authorization，不能用*（浏览器对带自定义头的请求要求明确指定）
        response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type");
        // 预检结果缓存1小时，避免重复发送OPTIONS请求
        response.setHeader("Access-Control-Max-Age", "3600");

        // 处理OPTIONS预检请求，直接返回200状态码，无需转发到业务接口
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            return;
        }

        // 继续处理正常的业务请求
        chain.doFilter(req, res);
    }

    @Override
    public void destroy() {}
}

2. 在web.xml中配置Filter（适用于Java EE/Servlet环境） #

确保Filter能拦截所有请求，包括OPTIONS：

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" version="4.0">
    <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>com.yourpackage.CorsFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
        <!-- 确保OPTIONS请求被Filter处理 -->
        <dispatcher>REQUEST</dispatcher>
        <dispatcher>OPTIONS</dispatcher>
    </filter-mapping>
</web-app>

3. Google App Engine环境额外检查 #

如果使用App Engine标准环境，确认Filter配置在web.xml中生效，且App Engine未覆盖你的CORS设置。若之前尝试过设置具体域名，需确保域名完全匹配（包括协议http/https、端口号，比如http://localhost:3000）。

修改后，通过浏览器开发者工具查看网络请求：

1. 触发API调用，确认存在OPTIONS请求
2. 检查OPTIONS请求的响应头，确认包含Access-Control-Allow-Origin、Access-Control-Allow-Headers等配置
3. 确认后续的GET请求能正常发送并获取数据

内容的提问来源于stack exchange，提问作者Eva Software Solutions