Axios请求遭CORS策略拦截：POSTMAN正常UI端异常排查

核心问题拆解 #

POSTMAN能正常请求但浏览器触发CORS错误，本质是浏览器的预检请求（OPTIONS）未被后端正确响应，或是带凭证的请求规则未满足，和POSTMAN跳过浏览器同源策略校验有关。

具体排查与修复步骤 #

1. 强制后端处理OPTIONS预检请求 #

浏览器发送带自定义头（比如Authorization）的POST请求前，会先发送OPTIONS请求，后端必须单独处理并返回合规的CORS头，否则直接触发拦截：

// 放在PHP业务代码最顶部
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    // 替换为你的前端实际域名，比如http://localhost:5173，不能用*（带凭证请求不允许）
    header("Access-Control-Allow-Origin: http://你的前端域名");
    header("Access-Control-Allow-Methods: POST, OPTIONS");
    header("Access-Control-Allow-Headers: Authorization, Content-Type");
    header("Access-Control-Allow-Credentials: true"); // 带凭证（Basic Auth）必须设为true
    exit(); // 直接结束请求，不进入后续业务逻辑
}

2. 修正前端Axios的凭证配置 #

使用Basic Auth时，除了设置Authorization头，必须开启携带凭证的开关：

axios.post('/api/login', {}, {
  headers: {
    // 确保用户名密码格式正确，无特殊字符编码问题
    'Authorization': 'Basic ' + btoa('用户名:密码')
  },
  withCredentials: true // 关键！带凭证请求必须开启此配置
})

3. 校验后端所有响应的CORS头完整性 #

确保POST请求的响应也包含以下头（和OPTIONS的配置保持一致）：

// 在POST请求的响应代码中添加
header("Access-Control-Allow-Origin: http://你的前端域名");
header("Access-Control-Allow-Credentials: true");

• 禁止将Access-Control-Allow-Origin设为*，带凭证的请求不允许通配符域名。

4. 验证Basic Auth编码正确性 #

在浏览器开发者工具的Network面板中，查看请求头的Authorization值是否符合Basic 编码后的字符串格式。如果有特殊字符，改用更稳定的编码方式（比如Node.js环境用Buffer.from('用户名:密码').toString('base64')）。

5. 检查预检请求状态 #

在浏览器Network面板中，找到OPTIONS请求，确认其状态码为200，且响应头包含之前配置的CORS规则。如果OPTIONS返回404或其他错误，说明后端未正确拦截处理预检请求。

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