React应用中如何通过Axios实现Kerberos SSO授权？

核心原因 #

浏览器直接访问API时自动携带Kerberos票据，是因为浏览器默认对符合条件的站点（同源或可信站点）自动完成Kerberos协商流程。而Axios请求需要明确配置允许携带凭证，同时后端CORS策略必须配合，否则浏览器会阻止凭证发送。

解决方案步骤 #

1. 开启Axios的凭证携带配置 #

必须在Axios请求中启用withCredentials，这是让浏览器发送Kerberos票据（属于用户凭证）的关键：

单个请求配置

axios.get('https://example.com/api/v1/sso_auth', {
  withCredentials: true
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});

全局Axios配置

如果所有请求都需要Kerberos认证，可以全局设置：

import axios from 'axios';

axios.defaults.withCredentials = true;

2. 后端CORS策略必须适配 #

服务器端必须返回以下CORS响应头，否则浏览器会拒绝发送凭证：

• Access-Control-Allow-Credentials: true：明确允许携带凭证
• Access-Control-Allow-Origin: 你的前端域名（比如http://localhost:3000）：不能用*，因为通配符和凭证携带冲突
• 可选：Access-Control-Allow-Headers: Authorization, Content-Type：确保协商所需的头被允许

3. 配置浏览器的Kerberos信任 #

• 将前端域名添加到浏览器的可信站点/本地Intranet列表（Chrome：设置→隐私和安全→安全→本地Intranet→添加站点）
• 如果前端是HTTP协议、API是HTTPS，需要在Chrome的chrome://settings/content/insecureContent中，允许前端域名加载HTTPS内容
• 确认客户端机器的Kerberos配置（如krb5.conf）正确，API服务器的SPN（服务主体名称）已正确注册到KDC

4. 避免手动获取票据的误区 #

Kerberos票据是浏览器与KDC（密钥分发中心）直接交互生成的，前端JavaScript无法直接读取或操作票据。只要前面的配置正确，浏览器会自动在请求中添加Authorization: Negotiate <票据>头，完成协商流程。

常见排查点 #

• 检查浏览器控制台的网络请求：查看OPTIONS预检请求的响应头是否包含正确的CORS配置
• 查看实际请求的请求头：确认是否携带了Authorization: Negotiate头
• 确认API服务器的Kerberos配置：SPN是否与请求域名匹配，KDC是否能正常解析客户端票据

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