使用Cypress实现浏览器内跨域登录Auth0时回调跳转冻结问题求助

你判断的域名不一致问题确实是核心诱因，本质是Cypress默认的跨域安全限制、搭配代码中的错误异步声明，共同导致了跳转时的冻结问题，对应解决方法如下：

• 开启跨域支持配置
  打开你的cypress.config.js（或cypress.config.ts）配置文件，新增experimentalSessionAndOrigin配置项，开启后Cypress会自动处理跨域跳转后的上下文同步：

  const { defineConfig } = require('cypress')
  
  module.exports = defineConfig({
    e2e: {
      experimentalSessionAndOrigin: true,
      // 其余原有配置保留
    }
  })
  

• 移除登录逻辑中的async/await声明
  Cypress的所有命令本身是基于链式队列执行的异步逻辑，不需要额外用async/await包装，额外的异步声明会打乱命令的执行顺序，导致跳转后的等待逻辑失效，修改后的代码如下：

  const fillLogin = () => {
    cy.log("Filling login");
    cy.get("#username")
      .should("be.visible")
      .type(testUser());
    cy.get("#password")
      .should("be.visible")
      .type(testPassword());
    cy.get("button[name=\"action\"]")
      .should("be.visible")
      .click();
  
    return cy.get(".main-container")
      .should("be.visible");
  };
  

• 用cy.session()封装登录流程（可选优化）
  官方推荐用session封装登录逻辑，自动缓存登录状态，同时天然支持跨域认证场景，示例如下：

  Cypress.Commands.add('login', (username, password) => {
    cy.session([username, password], () => {
      cy.visit('/')
      // 自动跳转到Auth0登录页后填写表单
      cy.get("#username").should("be.visible").type(username);
      cy.get("#password").should("be.visible").type(password);
      cy.get("button[name=\"action\"]").should("be.visible").click();
      // 等待跳转回应用后验证登录成功
      cy.url().should('include', '/callback')
      cy.get(".main-container").should("be.visible");
    })
  })
  

• 检查Auth0侧的配置
  登录Auth0后台，确认你测试用的应用域名（比如http://localhost:3000）已经被添加到以下配置项中：
  • Allowed Callback URLs
  • Allowed Web Origins
    漏加配置会导致Auth0拦截回调请求，直接卡在跳转中间页。

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