Fetch请求返回401错误，但浏览器可正常查看JSON数据

你遇到的这个情况其实挺常见的：浏览器直接访问API URL能正常拿到JSON，但用Fetch调用就返回401 Unauthorized，核心原因是Fetch默认不会自动携带Windows身份验证所需的用户凭据，而浏览器在直接访问资源时会自动处理这些凭据，所以才会出现这种差异。

快速修复：修改Fetch请求配置 #

只需要给Fetch添加credentials: 'include'参数，让它自动携带当前用户的身份凭据即可，修改后的代码如下：

fetch("/api/letters", {
  credentials: 'include' // 关键配置，启用身份凭据携带
})
 .then((data) => data.json())
 .then((json) => {
    this.setState({ items: json });
  })
 .catch(error => {
    console.error('请求处理出错:', error); // 建议加上错误捕获，方便后续排查问题
  });

原理说明 #

• 浏览器直接访问API时，会自动发送当前登录用户的NTLM/Kerberos身份凭据，所以能顺利通过Windows身份验证
• Fetch API的默认配置中，不会主动携带这类身份凭据，必须通过credentials参数明确指定：
  • credentials: 'include'：无论请求是同域还是跨域，都会携带用户的身份凭据（比如Cookie、HTTP认证头）
  • 如果你确定是同域请求，也可以用credentials: 'same-origin'，效果一致，但include的兼容性和通用性更强

额外排查建议（如果修复后仍有问题） #

• 确认IIS站点已正确启用Windows身份验证，并彻底禁用匿名身份验证
• 检查LettersController是否标记了[Authorize]属性，确保它要求的身份验证策略和站点配置一致
• 打开浏览器开发者工具的「网络」面板，查看Fetch请求的请求头，确认是否包含了Authorization头或者相关的身份验证Cookie

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