配置CORS后仅带Basic Auth的接口出现跨域错误，如何解决？

问题核心 #

你遇到的问题是带Basic Auth的接口触发了浏览器CORS预请求（OPTIONS），但服务器未正确处理该预请求，导致响应缺少Access-Control-Allow-Origin头。普通接口属于简单请求，无需预请求即可正常访问；而包含Authorization头的请求属于非简单请求，浏览器会先发送OPTIONS预请求确认权限，若服务器未正确响应预请求，就会触发跨域错误。

解决步骤 #

1. 确保服务器正确处理OPTIONS请求 #

浏览器发送的预请求为OPTIONS方法，服务器必须对/api/admin路径的OPTIONS请求返回200/204状态码，并附带完整的CORS响应头。

常见后端框架配置示例：

• Express.js：

  const cors = require('cors');
  // 全局CORS配置
  app.use(cors({
    origin: 'http://localhost:3000', // 指定允许的前端域名
    allowedHeaders: ['Authorization', 'Content-Type'], // 允许携带的请求头
    methods: ['GET', 'POST', 'OPTIONS'], // 允许的请求方法
    credentials: false // Basic Auth无需携带凭证，可设为false
  }));
  
  // 或针对特定路径单独配置OPTIONS处理
  app.options('/api/admin', cors());
  

• Spring Boot：
  在配置类中添加CORS映射规则：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/api/admin")
                  .allowedOrigins("http://localhost:3000")
                  .allowedMethods("POST", "OPTIONS")
                  .allowedHeaders("Authorization", "Content-Type")
                  .allowCredentials(false);
      }
  }
  

2. 验证预请求响应 #

用curl命令测试服务器的OPTIONS响应是否符合要求：

curl -X OPTIONS http://localhost:8080/api/admin \
-H "Origin: http://localhost:3000" \
-H "Access-Control-Request-Method: POST" \
-H "Access-Control-Request-Headers: Authorization"

检查响应头需包含以下字段：

• Access-Control-Allow-Origin: http://localhost:3000
• Access-Control-Allow-Headers: Authorization
• Access-Control-Allow-Methods: POST

3. 排查服务器权限拦截规则 #

部分服务器会对/admin这类管理路径做权限拦截，可能误拦截了OPTIONS预请求。需确保权限校验逻辑跳过OPTIONS请求，或允许OPTIONS请求无需认证即可访问。

你的请求代码与错误信息 #

请求代码： #

axios.post(process.env.REACT_APP_BE_URL + "/api/admin",{}, {
      headers: {
        Authorization: 'Basic ' + btoa(`${login}:${password}`)
      }
})

错误信息： #

Access to XMLHttpRequest at 'http://localhost:8080/api/admin' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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