Cypress测试触发Mixed Content错误致播放器加载失败如何解决

问题表现 #

• 手动通过HTTPS协议访问页面时，播放器组件所有功能运行正常
• 执行Cypress自动化测试用例时播放器加载失败，控制台抛出Mixed Content报错，存在HTTP协议发起的资源请求
• 已尝试的无效修复方案：
  • 给所有请求添加upgrade-insecure-requests: 1请求头
  • 在Cypress配置中设置chromeWebSecurity: false
• 根因确认：页面中引用资源的script标签使用//开头的协议相对路径，Cypress运行时没有继承前置访问页面的HTTPS协议上下文，默认使用HTTP发起这类路径的资源请求，最终触发浏览器混合内容拦截规则。

已验证可落地的解决方案 #

这是Cypress运行环境协议上下文识别的典型问题，不少使用协议相对路径的老项目都踩过，以下方案亲测有效：

• 统一配置层协议声明
  打开Cypress配置文件，将baseUrl显式配置为带https://前缀的完整地址，不要省略协议、不要用协议相对格式，从根源统一测试运行的基准协议：

  // cypress.config.js 配置片段
  const { defineConfig } = require("cypress");
  module.exports = defineConfig({
    e2e: {
      baseUrl: "https://你的测试域名:对应端口", // 必须写全HTTPS前缀
      // 其余原有配置保持不变
    },
  });
  

  所有用例里的cy.visit()尽量用基于baseUrl的相对路径，比如cy.visit('/player-page')，不要自行编写省略协议的地址。

• 加全局请求拦截强制改写协议
  如果不方便修改项目配置、或者项目里第三方资源硬写了协议相对路径，可以在e2e的support文件（一般是cypress/support/e2e.js）里加全局拦截规则，把所有无协议、HTTP协议的静态资源请求强制改成HTTPS：

  // 写在e2e.js全局生效，不用每个用例单独加
  beforeEach(() => {
    cy.intercept(
      { url: /^(http:\/\/|\/\/)/ },
      (req) => {
        req.url = req.url.replace(/^http:\/\//, "https://").replace(/^\/\//, "https://");
      }
    )
  })
  

• 特殊场景补充
  如果是本地启动的HTTPS测试服务用了自签名证书，可以在Cypress配置里保留"chromeWebSecurity": false配置，注意这个配置单独使用解决不了协议相对路径的识别问题，但是配合前面两个方案可以绕过自签名证书的校验。

补充说明：很多人以为chromeWebSecurity: false能绕过混合内容拦截，实际上Chrome 90+版本之后默认强制阻止HTTPS页面加载HTTP类型的脚本、样式、iframe这类活跃资源，这个Cypress配置项已经无法绕过该级别的安全限制，必须从请求协议本身改起。

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