Cypress携带Bearer Token通过cy.visit访问页面不生效如何解决

你在cy.visit()中配置的authorization头，仅会作用于访问根路径/的初始HTML文档请求，不会自动继承给页面加载过程中的静态资源请求、后续所有XHR/Fetch接口请求。
Postman能正常访问是因为它只发起单个HTTP请求，和浏览器加载页面时的多请求链路逻辑完全不同，这是两边表现不一致的核心原因。
你之前尝试的localStorage方案不生效，基本都是设置时机错误：如果等页面加载完成后再写入token，前端路由守卫早就完成鉴权判断跳转到登录页了。

根据你的鉴权实现选对应方案即可：

方案1：全链路请求注入Authorization头（适合后端网关/接口统一校验请求头的场景） #

不要在单个cy.visit里配置头，用cy.intercept全局拦截所有出站请求统一注入，保证所有请求都能带上token：

// 写在cypress/support/e2e.js（或ts）的全局beforeEach里，所有用例自动生效
beforeEach(() => {
  // 推荐把token存在Cypress环境变量里，不要硬编码
  const validToken = Cypress.env('ACCESS_TOKEN')
  cy.intercept({ url: '**/*' }, (req) => {
    // 注意头名用大写开头的Authorization，部分网关、后端框架对小写头有兼容问题
    req.headers['Authorization'] = `Bearer ${validToken}`
  })
})

// 之后正常发起页面访问即可，无需单独传headers
cy.visit('/')

方案2：前端路由守卫鉴权场景（token存在本地存储） #

如果你的鉴权逻辑是前端读取localStorage/sessionStorage中的token做判断，用onBeforeLoad钩子在业务代码执行前写入token：

const validToken = Cypress.env('ACCESS_TOKEN')
cy.visit('/', {
  onBeforeLoad(win) {
    // 替换成你项目实际存储token的key，比如常见的access_token、auth_token等
    win.localStorage.setItem('your_project_real_token_key', validToken)
    // 如果项目存在sessionStorage里就换成win.sessionStorage.setItem
  }
})

补充排错提示 #

调试时直接打开Cypress运行器的Network面板，逐个检查实际发出的请求是否携带了正确的Authorization头，先确认是初始文档请求缺头，还是后续接口/静态资源请求缺头，再对应调整方案即可。

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