如何在浏览器中为ASP.NET Web API传递认证头的用户名密码

嘿，我来帮你搞定这个问题！你已经能用REST客户端和C#代码访问带Basic认证的API了，浏览器访问其实也有几种实用的方法，下面给你逐一说明：

方法1：URL中直接嵌入认证信息（仅适合测试环境） #

这是最简单的方式，直接把用户名和密码拼在API地址前面，格式如下：

http://username:password@your-api-domain.com/api/your-endpoint

比如你C#代码里用的test:123，就可以写成：

http://test:123@your-api-domain.com/api/values

注意：这个方法只适合本地测试，因为密码会明文显示在地址栏、浏览器历史记录和服务器日志里，非常不安全，绝对不能在生产环境使用。

方法2：利用浏览器自带的认证弹窗 #

如果你的ASP.NET Web API正确配置了Basic认证（服务器会在未认证时返回401 Unauthorized响应，同时带有WWW-Authenticate: Basic realm="YourRealm"的响应头），那么当你直接在浏览器地址栏输入API地址时，浏览器会自动弹出一个登录对话框，让你输入用户名和密码。输入正确后，浏览器会自动把认证信息添加到后续的请求头里，你就能正常访问API了。

这是最标准的浏览器处理Basic认证的方式，不需要额外操作，只要API配置正确就行。

方法3：用开发者工具手动添加认证头 #

如果浏览器没有自动弹出认证框，或者你想手动控制请求头，可以用Chrome的开发者工具来实现：

1. 按下F12打开开发者工具，切换到Network标签页
2. 在地址栏输入API地址并回车，找到对应的请求（比如values）
3. 右键点击该请求，选择「Copy」→「Copy as fetch」
4. 切换到Console标签页，粘贴刚才复制的代码，然后修改添加Authorization头：

fetch('https://your-api-domain.com/api/values', {
  method: 'GET',
  headers: {
    'Authorization': 'Basic dGVzdDoxMjM=' // 这里替换成你自己的base64编码串
  },
  credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))

5. 按下回车执行，就能看到API返回的数据了。

方法4：使用书签脚本（Bookmarklet）快速添加认证 #

如果你需要频繁测试API，可以把认证逻辑做成书签脚本，点击一下就能自动添加认证信息：

1. 在浏览器里新建一个书签，名称随便填（比如「API认证」）
2. 把书签的URL替换成下面的代码：

javascript:(function(){
  var username = prompt('请输入用户名:');
  var password = prompt('请输入密码:');
  if(username && password){
    var authToken = btoa(username + ':' + password);
    document.cookie = 'Authorization=Basic ' + authToken + '; path=/; SameSite=Lax';
    location.reload();
  }
})();

3. 访问API页面时，点击这个书签，输入用户名和密码，页面会自动刷新并带上认证头。

注意：这个方法依赖浏览器Cookie，部分严格的CORS策略可能会限制它的使用，同样只适合测试场景。

重要提醒 #

无论用哪种方法，一定要在HTTPS环境下使用Basic认证！因为Basic认证的凭证只是用Base64编码（不是加密），很容易被解码获取明文密码，HTTPS才能保证传输过程的安全性。

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