Angular调用带Basic Auth的API时出现CORS错误

核心分析 #

你遇到的两次请求问题大概率是跨域预检（OPTIONS）请求导致的：浏览器在发送带自定义头（如Authorization）的跨域请求前，会自动先发OPTIONS请求验证服务器是否允许跨域。新Weblogic服务器的Basic Auth配置可能拦截了OPTIONS请求，或者你的Angular拦截器错误地给OPTIONS请求也添加了认证头，导致预检失败，进而后续的GET请求返回500。

具体排查与修复步骤 #

1. 确认请求类型

打开浏览器开发者工具的Network标签，查看两次请求的Method字段：

• 如果第一次是OPTIONS，第二次是GET，那就是预检请求的问题。

2. 修改Angular拦截器，跳过OPTIONS请求的认证头

浏览器的预检请求不需要携带Authorization头，强制添加会触发Weblogic的认证拦截，导致错误。修改拦截器代码：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 仅对非OPTIONS请求添加认证头
  if (environment.authentication && req.method !== 'OPTIONS') {
    req = req.clone({
      setHeaders: {
        'Content-Type': 'application/json; charset=utf-8',
        'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
        'Authorization': `Basic ${btoa(environment.user + ':' + environment.password)}`,
      },
    });
  }
  return next.handle(req);
}

3. 替换方法级@CrossOrigin为全局CORS配置

方法级的@CrossOrigin在处理带认证的跨域请求时容易出现兼容性问题，改用SpringBoot全局CORS配置，确保OPTIONS请求被正确放行：

@Configuration
public class GlobalCorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*") // 生产环境建议指定具体域名
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600); // 预检请求缓存时长，减少重复请求
    }
}

4. 检查Weblogic的安全配置

如果Weblogic启用了容器级的Basic Auth，需要确保OPTIONS请求不需要认证：

• 编辑Weblogic部署项目的web.xml，在security-constraint中不要包含OPTIONS方法，或者单独配置允许OPTIONS请求匿名访问：

<security-constraint>
    <web-resource-collection>
        <web-resource-name>Protected APIs</web-resource-name>
        <url-pattern>/*</url-pattern>
        <!-- 仅对需要认证的方法做限制，排除OPTIONS -->
        <http-method>GET</http-method>
        <http-method>POST</http-method>
        <http-method>PUT</http-method>
        <http-method>DELETE</http-method>
    </web-resource-collection>
    <!-- 其他认证配置 -->
</security-constraint>

5. 查看服务器日志定位500根因

如果以上步骤仍未解决，查看Weblogic和SpringBoot的服务器日志，获取500错误的具体堆栈信息：

• Weblogic日志通常在domain_home/servers/[server_name]/logs目录下
• SpringBoot日志可通过配置文件输出到指定路径，重点关注认证流程或请求处理过程中的异常信息

内容的提问来源于stack exchange，提问作者Francesco Cappellini