如何在客户端设置自定义请求头供服务器读取（认证场景）

你遇到的核心问题是：浏览器不允许JavaScript直接修改页面导航类请求（比如刷新页面的GET请求）的请求头，Headers API仅能用于构造fetch/XHR请求的头，无法影响浏览器发起的页面级请求。以下是两种无需额外POST端点的可行方案：

方案1：封装全局请求工具（适用于AJAX/API请求） #

如果需求是后续所有fetch/XHR请求自动携带认证头，可以把认证信息存在本地存储，再封装全局请求方法自动添加头，其他开发者只需替换原生请求方法即可。

步骤1：存储认证信息到localStorage #

window.addEventListener("message",(data)=>{
  // 将认证信息存入localStorage
  localStorage.setItem('so-auth-user', data.display);
  localStorage.setItem('so-auth-email', data.email);
  localStorage.setItem('so-auth-name', `${data.fName} ${data.lName}`);
  
  setTimeout(()=>{authWindow.close()},500);
  location.reload();
})

步骤2：封装带认证头的fetch方法 #

// 全局封装fetch，自动注入认证头
const authenticatedFetch = (...args) => {
  const baseHeaders = new Headers(args[1]?.headers || {});
  
  // 从localStorage读取认证信息并添加到请求头
  const user = localStorage.getItem('so-auth-user');
  const email = localStorage.getItem('so-auth-email');
  const name = localStorage.getItem('so-auth-name');
  
  if (user) baseHeaders.set('so-auth-user', user);
  if (email) baseHeaders.set('so-auth-email', email);
  if (name) baseHeaders.set('so-auth-name', name);
  
  return fetch(args[0], {
    ...args[1],
    headers: baseHeaders
  });
};

// 其他开发者使用示例：直接用authenticatedFetch替代原生fetch
authenticatedFetch('/api/user-info')
  .then(res => res.json())
  .then(data => console.log(data));

方案2：使用Cookie传递认证信息（适用于页面初始请求+API请求） #

如果需要页面刷新后的初始请求（比如GET HTML页面）也能让服务器获取认证信息，Cookie是最优选择——浏览器会自动将Cookie随所有同域请求发送，服务器端读取Cookie的方式和读取请求头几乎一样简便。

步骤1：设置认证Cookie #

window.addEventListener("message",(data)=>{
  // 设置Cookie，注意编码特殊字符，同时配置安全属性
  const setCookie = (name, value) => {
    document.cookie = `${name}=${encodeURIComponent(value)}; path=/; SameSite=Lax; ${window.location.protocol === 'https:' ? 'Secure;' : ''}`;
  };
  
  setCookie('so-auth-user', data.display);
  setCookie('so-auth-email', data.email);
  setCookie('so-auth-name', `${data.fName} ${data.lName}`);
  
  setTimeout(()=>{authWindow.close()},500);
  location.reload();
})

步骤2：服务器端读取Cookie #

以Node.js/Express为例：

app.get('/', (req, res) => {
  // 直接从Cookie中读取认证信息，和读请求头逻辑一致
  const authUser = req.cookies['so-auth-user'];
  const authEmail = req.cookies['so-auth-email'];
  const authName = req.cookies['so-auth-name'];
  
  // 后续业务逻辑处理
});

注意事项 #

• 安全层面：localStorage存在XSS泄露风险，敏感信息建议用Cookie并开启Secure（HTTPS环境）、SameSite=Lax/Strict降低CSRF风险；生产环境建议对存储的认证信息加密。
• 兼容性：两种方案都兼容现代浏览器，无需额外依赖。

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