如何配置Cypress访问基于Laradock搭建的Laravel项目URL

前置场景 #

• 基于Laradock搭建的Laravel项目已部署完成，可通过http://blog.localhost正常访问
• 编写Cypress URL访问测试用例后，运行测试出现连通性报错，无法正常访问项目地址

核心原因 #

Laradock基于Docker容器化编排服务，Cypress运行环境（宿主机/独立容器）和Laravel服务所在的Docker网络默认不互通，加上域名解析规则不一致，就会出现访问失败。

分步配置 #

1. 按Cypress运行场景匹配baseUrl #

根据你跑Cypress的位置选对应配置，修改项目根目录下的cypress.config.js（TS项目对应cypress.config.ts）：

• 如果你在本地宿主机直接跑Cypress：
  1. 先确认本地hosts文件已经加了域名映射：

     127.0.0.1 blog.localhost
     

  2. 查看Laradock目录下.env文件里的NGINX_PORT值，如果是默认80端口，baseUrl直接配http://blog.localhost；如果是自定义端口（比如8080），就配成http://blog.localhost:8080
  3. 配置示例：

     const { defineConfig } = require("cypress");
     
     module.exports = defineConfig({
       e2e: {
         baseUrl: "http://blog.localhost",
         setupNodeEvents(on, config) {
           // 保留你原来的事件配置即可
         },
       },
     });
     

• 如果你在Laradock的workspace容器内跑Cypress：
  容器内部不能用localhost或你绑定的本地域名访问同网络下的Nginx服务，直接把baseUrl改成http://nginx即可，Docker内置DNS会自动解析到同网络下的Nginx服务容器。
  如果Cypress是单独起的容器，启动时要加--network参数指定Laradock的默认网络（一般网络名是laradock_default，可以用docker network ls命令查看确认），保证和Nginx容器在同一个网络下。

2. 常见异常处理 #

• 如果后续配置本地HTTPS后出现证书校验报错，在Cypress配置里加chromeWebSecurity: false即可关闭安全校验
• 配置改完先重启Cypress服务，测试用例里直接写cy.visit('/')就会自动拼接baseUrl访问，不用写全路径
• 如果还是报连接错误，先在跑Cypress的环境里用curl测连通性：宿主机跑就本地执行curl http://blog.localhost，容器内跑就进容器执行curl http://nginx，先确认网络通了再排查Cypress本身的配置问题。

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