为什么登录后所有XHR请求中都会显示基本身份验证凭据

Question

我的基本身份验证与网络中的其他API服务器一起出现问题。简单方案：

1. 浏览器向Nginx服务器发送GET请求
2. Nginx回复401
3. 用户发送基本身份验证凭据
4. Nginx响应200.浏览器加载静态文件（CSS + JS）并评估它们。
5. 在JS中，有一个获取另一个API（包含CORS）
6. 但是我在API服务器的所有请求中都看到了具有基本身份验证凭据的Auth标头。

问题是为什么？这是浏览器的工作方式吗？如果我不控制给定的JS文件，我怎么能删除它们？

我正在使用Nginx基本身份验证模块，配置非常简单：

location / {
    try_files $uri /index.html;

    auth_basic "Restricted Content";
    auth_basic_user_file /etc/nginx/.htpasswd;
}

Answer 1

问题是为什么？这是浏览器的工作方式吗？

是的，这是浏览器的工作方式，有充分的理由。根据{{​​3}}，对于基本身份验证方案：

  

客户应该假设所有路径都在或深于      Request-URI的路径字段中的最后一个符号元素也是      在Basic领域值指定的保护空间内      当前的挑战。客户可以抢先发送      相应的授权标头，包含对资源的请求      那个空间没有从服务器接收到另一个挑战。

在这个问题的情况下，如果GET / HTTP请求获得基本身份验证响应（401 Unauthorized，WWW-Authenticate: Basic realm="..."响应头），并且身份验证成功，则所有后续HTTP请求都将自动拥有Authorization标头。这旨在改善用户体验 - 否则，在发送新的HTTP请求时，将始终弹出身份验证对话框。想象一下，如果访问了4页/，/my-account，/my-orders，/my-address，则会弹出4次身份验证对话框并强制用户反复输入凭据，这非常痛苦。

如果我没有控制给定的JS文件，我该如何删除它们？

为防止浏览器为某些页面发送Authorization标题，有两种方法：

1. 配置Nginx，仅对某些网址启用基本身份验证，例如/secure/...。通过这种方式，对非安全URL的HTTP请求不会有Authorization标题。
2. 使用摘要身份验证并在domain标题中配置WWW-Authenticate属性。

Answer 2

您可以根据请求类型确定将返回所有必需标头的函数。假设您希望某些API公开，那么您可以有条件地设置标题。

const getToken = () => ({
 "Authorization": `Token ${localStorage.getItem("token")}`
})

function getHeaders(type) {
  const json_headers = {
   'Accept': 'application/json',
   'Content-Type': 'application/json'
  }

  if(type === "Public"){
    return return Object.assign({}, json_headers)
  } else {
     return Object.assign({}, json_headers, getToken())
  }
}

然后你可以将这些标题传递给你的ajax / fetch API。

let fetchOptions = {
  method,
  headers: getHeaders(type),
}

fetch(url, fetchOptions)