如何让Chrome记住React+Vite前端的Basic Auth授权凭证

Chrome的自动Basic Auth凭证管理仅对浏览器原生触发的认证弹窗生效，你通过自定义请求头完成认证的方式不在浏览器的自动处理逻辑内，所以会出现仅单次请求生效的情况。以下是几个可行的解决方案：

方案1：触发浏览器的凭证存储机制 #

后端在认证成功的响应中返回WWW-Authenticate: Basic realm="YourRealm"头，同时返回200状态码（不要返回401，否则会弹出默认弹窗）。这样浏览器会识别到这是Basic Auth认证场景，自动保存你发送的凭证，后续请求就会自动携带Authorization头。

Spring Boot后端可这样处理：

@GetMapping("/api/your-endpoint")
public ResponseEntity<?> yourEndpoint(HttpServletRequest request) {
    // 完成认证逻辑后
    HttpHeaders headers = new HttpHeaders();
    headers.add("WWW-Authenticate", "Basic realm=\"YourApplication\"");
    return new ResponseEntity<>(yourResponseData, headers, HttpStatus.OK);
}

注意：必须确保前端第一次请求时正确发送了Authorization头，后端认证通过后返回这个头，Chrome才会存储凭证。

方案2：前端手动管理凭证 #

既然浏览器不自动存储，就手动将凭证存在前端存储中，每次请求自动带上Authorization头。

React中可这样实现：

1. 登录成功后，把Base64编码的凭证存在sessionStorage或localStorage：

const handleLogin = (username, password) => {
  const credentials = btoa(`${username}:${password}`);
  sessionStorage.setItem('basicAuthCredentials', credentials);
  // 发送登录请求
  fetch('/api/login', {
    headers: {
      'Authorization': `Basic ${credentials}`,
      'X-Requested-With': 'XMLHttpRequest'
    }
  });
};

2. 封装请求工具，每次请求自动读取凭证并添加头：

const apiFetch = (url, options = {}) => {
  const credentials = sessionStorage.getItem('basicAuthCredentials');
  const headers = {
    ...options.headers,
    ...(credentials ? { 'Authorization': `Basic ${credentials}` } : {})
  };
  return fetch(url, { ...options, headers });
};

注：localStorage会持久化存储凭证，直到手动清除；sessionStorage则在标签页关闭后失效，安全性相对更高。

方案3：改用Cookie存储认证信息 #

将Basic Auth凭证转换成Cookie的方式，后端设置HttpOnly Cookie，浏览器会自动携带Cookie，无需前端手动处理请求头。

Spring Boot后端配置示例：

@PostMapping("/api/login")
public ResponseEntity<?> login(@RequestParam String username, @RequestParam String password, HttpServletResponse response) {
    // 验证用户名密码
    boolean isValid = validateCredentials(username, password);
    if (isValid) {
        String credentials = Base64.getEncoder().encodeToString((username + ":" + password).getBytes());
        Cookie authCookie = new Cookie("BasicAuth", credentials);
        authCookie.setHttpOnly(true); // 防止XSS攻击
        authCookie.setPath("/");
        authCookie.setMaxAge(86400); // 有效期1天
        response.addCookie(authCookie);
        return ResponseEntity.ok().build();
    }
    return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
}

然后后端添加过滤器，从Cookie中读取凭证并设置Authorization头：

public class AuthCookieFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if ("BasicAuth".equals(cookie.getName())) {
                    String authHeader = "Basic " + cookie.getValue();
                    request.addHeader("Authorization", authHeader);
                    break;
                }
            }
        }
        filterChain.doFilter(request, response);
    }
}

这种方式安全性更高，HttpOnly Cookie不会被前端JS读取，能避免XSS窃取凭证。

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