如何为React应用的API调用配置自动Windows身份验证

核心实现逻辑 #

浏览器安全沙箱禁止前端JavaScript直接读取本地Windows登录凭据，因此不需要尝试在React代码中手动获取凭据，而是走*Windows集成身份验证（IWA）*流程，由浏览器自动携带加密后的用户凭据完成鉴权，具体实现步骤如下：

1. 后端API配置Windows集成身份验证 #

根据你的后端技术栈开启Windows身份验证，禁用匿名访问：

• 若后端使用IIS托管：
  • 打开IIS管理器定位到API站点，进入「身份验证」设置页
  • 禁用「匿名身份验证」，启用「Windows身份验证」
  • 域环境下如需使用Kerberos协议，联系IT管理员配置对应SPN即可
• 若后端为ASP.NET Core：
  • 在Program.cs中添加身份验证服务：

  builder.Services.AddAuthentication(NegotiateDefaults.AuthenticationScheme)
    .AddNegotiate();
  

  • 中间件注册顺序确保app.UseAuthentication()在app.UseAuthorization()之前调用

2. React前端请求配置 #

仅需要在API请求中添加携带凭据的配置项，浏览器会自动把当前登录用户的加密Windows凭据附加到请求中：

• 使用原生fetch的写法：

fetch('https://你的后端API地址/请求路径', {
  method: 'GET',
  credentials: 'include'
})

• 使用axios的写法：

// 全局配置，所有请求自动携带凭据
axios.defaults.withCredentials = true;

// 单个请求单独配置
axios.get('https://你的后端API地址/请求路径', {
  withCredentials: true
})

3. 跨域配置（前后端域名不同时必须配置） #

如果React前端和后端API部署在不同域名，后端CORS配置不能使用通配符*，必须明确指定允许的前端域名，同时开启凭据支持：
以ASP.NET Core为例：

builder.Services.AddCors(options =>
{
  options.AddPolicy("允许前端站点", policy =>
  {
    policy.WithOrigins("https://你的React站点实际域名")
      .AllowAnyHeader()
      .AllowAnyMethod()
      .AllowCredentials();
  });
});

4. 客户端浏览器配置 #

内网环境下主流浏览器默认支持自动发送Windows凭据，无需用户额外操作：

• Edge/Chrome：公网域名需要用户手动将站点添加到浏览器的「本地Intranet」安全区域
• Firefox：在about:config页搜索network.negotiate-auth.trusted-uris，添加你的站点域名即可

配置完成后可先使用Postman选择Windows身份验证模式测试接口可用性，验证通过后前端无需编写额外凭据获取逻辑即可正常调用接口。

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