如何在JavaScript的fetch()中阻止401响应触发浏览器认证弹窗？

问题背景 #

我正在开发Office插件，实现Codebeamer（生产服务器）与MS Project的单向任务数据同步。用户通过MS Project的HTML界面输入用户名密码建立连接，成功后同步Codebeamer任务数据到MS Project。

当前遇到的问题：当用户输入错误凭证时，Codebeamer返回401响应，但浏览器会弹出系统默认的认证弹窗，而非执行我编写的JavaScript错误处理逻辑。

已尝试的无效方案：

• 在fetch()中添加"removeHeader": WWW-Authenticate
• 将WWW-Authenticate设为"xBasic"

我了解到可以把服务器端401响应改成400，但不确定是否合适，因此有两个疑问：

1. 修改服务器响应码为400是否会影响其他第三方应用与Codebeamer的连接？
2. 有没有其他可行的解决方案？

当前代码如下：

async function clickBtnAuthenticationOk() {
    
  const userName = htmlClassInputUserId.value;
  const userPwd = htmlClassInputPassword.value;
  serverName = htmlClassCbServer.value;
  taskIDInput = htmlClassTaskID.value;

  // make sure data is entered
  if (userName === "" || userPwd === "" || serverName === "") {
    logError(`authentification data missing\n`);
    return;
  }

  // checking whether entered TaskID column name is valid or not.
  if (taskIDInput === "") {
    logError("Please enter field name of Task IDs.\n");
    return;
  }
  if (!Object.keys(Office.ProjectTaskFields).includes(taskIDInput)) {
    logError(
      `'${taskIDInput}' is not a valid column name. Please enter appropriate Field name in which Task IDs are present.\n`
    );
    return;
  }

  const apiUrl = `${serverName}/cb/rest/user/${userName}`;
  auth = "Basic " + btoa(`${userName}:${userPwd}`);

  logText(`making authentification request to ${apiUrl}\n`);
  try {
    const response = await fetch(apiUrl, {
      method: "GET",
      mode: "cors",
      cache: "no-store",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
        Authorization: auth,
      },
      redirect: "follow",
      referrerPolicy: "no-referrer",
    });

    logText(`res staus is: ${response.status}`);
    if (!response.ok) {
      if (response.status === 401) {
        logError("Please enter correct userName, password.");
        return;
      } else {
        throw new Error("something went wrong.\n");
      }
    }
    const responseData = await response.json();
    if (responseData.status === "Activated" || responseData.status === "Aktiv") {
      isAuthenticationSuccess = true;
    }
  } catch (error) {
    logError(`Authentication failed: ${error}`);
    isAuthenticationSuccess = false;
  } finally {
    logText(`isAuthenticationSuccess:: ${isAuthenticationSuccess}\n`);
    if (isAuthenticationSuccess) {
      // Invalidate password
      htmlClassInputPassword.value = "";
      showStandardUsageHtmlScreen();
    }
  }
}

解答 #

1. 修改服务器响应码为400是否影响第三方应用？ #

会有明确影响。Codebeamer作为生产服务器，其他第三方应用大概率依赖标准HTTP状态码做逻辑处理：

• 401是标准的“未授权”状态码，第三方应用会据此触发重新认证的流程
• 改成400后，第三方应用会判定为“请求格式错误”，可能执行错误的处理逻辑（比如直接返回通用错误提示，而非引导用户重新输入凭证）

除非所有对接Codebeamer的第三方应用同步修改逻辑，否则绝对不建议修改生产服务器的响应码。

2. 可行的替代解决方案 #

方案一：调整fetch的credentials参数

浏览器弹出默认认证弹窗的核心原因是：当请求返回401且携带WWW-Authenticate: Basic头时，若credentials设为include或same-origin，浏览器会自动触发弹窗。将credentials改为omit即可阻止这一行为，同时不影响自定义错误逻辑的执行：

修改后的fetch配置：

const response = await fetch(apiUrl, {
  method: "GET",
  mode: "cors",
  cache: "no-store",
  credentials: "omit", // 关键修改
  headers: {
    "Content-Type": "application/json",
    Authorization: auth,
  },
  redirect: "follow",
  referrerPolicy: "no-referrer",
});

方案二：通过代理服务器转发请求

搭建一个中间代理服务器，前端将认证请求发送给代理，再由代理转发给Codebeamer：

• 若Codebeamer返回401，代理服务器将响应码改为400（或其他自定义状态码），同时移除WWW-Authenticate响应头
• 前端接收到修改后的响应后，即可正常执行自定义错误逻辑
• 该方案不会影响其他直接对接Codebeamer的第三方应用

方案三：使用Codebeamer的替代认证端点

检查Codebeamer是否提供非Basic Auth触发式的认证API，比如支持POST提交凭证的端点。这类端点通常返回JSON格式的错误信息，不会触发浏览器默认的认证弹窗。

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