Angular应用仅在Chrome出现CORS错误 Firefox可正常运行该如何解决

该问题是Chrome新版本对CORS规则、私有网络访问限制收紧导致的，Firefox对相关规则兼容更宽松所以不受影响，可通过以下方式修复：

1. 修复OPTIONS预检请求状态码 #

你现有代码中OPTIONS请求返回202 Accepted状态码，Chrome新版本要求CORS预检请求必须返回200 OK或204 No Content，202状态码会被直接判定为预检失败。
将Filter中OPTIONS请求的处理代码修改为：

if (request.getMethod().equals("OPTIONS")) {
    response.setStatus(HttpServletResponse.SC_NO_CONTENT);
    return;
}

2. 适配Chrome私有网络访问(PNA)限制 #

Chrome 94及以上版本新增私有网络访问限制，当公网远程后端收到来自本地私有网络（如localhost、本地内网）的请求时，要求响应头携带Access-Control-Allow-Private-Network: true才允许访问。
在Filter的响应头设置部分新增如下代码：

// 适配Chrome私有网络访问限制
if ("true".equals(request.getHeader("Access-Control-Request-Private-Network"))) {
    response.setHeader("Access-Control-Allow-Private-Network", "true");
}

3. 补全本地允许的Origin列表 #

你当前配置仅允许http://localhost:4200访问，如果本地开发时使用127.0.0.1:4200访问Angular应用，会出现Origin匹配失败的情况，可将允许列表补全：

private final List<String> allowedOrigins = Arrays.asList("http://localhost:4200", "http://127.0.0.1:4200");

4. 本地开发临时绕过方案 #

如果不想修改后端代码，可临时关闭Chrome的跨域安全限制，仅适用于本地开发场景：

• Windows：右键Chrome快捷方式，选择「属性」，在「目标」输入框的末尾追加参数 --disable-web-security --user-data-dir="C:\ChromeDevTmp"，保存后双击该快捷方式打开Chrome即可
• Mac：打开终端执行命令 open -n /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir=/Users/你的用户名/ChromeDevTmp

生产环境运行正常是因为生产前端部署在公网，不会触发私有网络访问限制，且生产环境的Origin匹配规则正常，所以不受影响。

内容的提问来源于stack exchange，提问作者Rami Khawaly