为何create-react-app在localhost无法正常渲染但GitHub Pages运行正常？

开发服务与缓存类问题 #

• 端口被残留进程占用：多次启停npm start可能导致旧的服务进程未正常退出，占用默认的3000端口，要么新服务无法正常启动，要么实际运行在其他端口但你仍访问旧端口。
  修复方法：
  • Windows系统：打开CMD执行netstat -ano | findstr :3000，找到对应进程的PID后，执行taskkill /PID <替换为实际PID> /F结束进程
  • Mac/Linux系统：终端执行lsof -i :3000，找到对应进程的PID后，执行kill -9 <替换为实际PID>结束进程
  • 也可以直接修改启动端口：在package.json的scripts配置项中，将start命令修改为"start": "PORT=3001 react-scripts start"，Windows系统需安装cross-env后修改为"start": "cross-env PORT=3001 react-scripts start"
• 本地缓存损坏：开发工具缓存、npm缓存或者浏览器缓存异常都会导致加载失败。
  修复方法：
  • 停止服务后删除项目下的node_modules/.cache文件夹
  • 执行npm cache clean --force清理全局npm缓存
  • 打开localhost页面后按Ctrl+Shift+R强制无缓存刷新，或开启浏览器隐身窗口访问，排查是否为浏览器缓存问题
• 依赖文件损坏：未修改代码也可能出现依赖文件意外损坏的情况。
  修复方法：
  • 删除项目下的node_modules文件夹、package-lock.json或yarn.lock文件
  • 重新执行npm install安装依赖，再运行npm start启动服务

系统与浏览器配置类问题 #

• hosts文件配置异常：localhost的本地解析被修改会导致无法正确指向本地服务。
  修复方法：
  • 打开hosts文件：Windows路径为C:\Windows\System32\drivers\etc\hosts，Mac/Linux路径为/etc/hosts
  • 确认文件中存在127.0.0.1 localhost和::1 localhost两条配置，缺失的话手动添加后保存
• 浏览器扩展拦截：广告拦截、代理、脚本管理类扩展可能误拦截本地请求。
  修复方法：临时禁用所有浏览器扩展后再访问，或更换其他未安装扩展的浏览器测试
• 代理/防火墙拦截：系统开启的VPN、全局代理、防火墙可能拦截本地端口的请求。
  修复方法：关闭所有代理、VPN软件，临时关闭系统防火墙后再尝试访问

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