localhost端口与Apache端口不匹配导致React项目无法访问求助

核心误区纠正 #

React开发项目不需要放到XAMPP的htdocs目录。npm start会启动React自带的webpack开发服务器，和Apache服务器完全独立，放到htdocs反而可能引发不必要的冲突。

具体解决步骤 #

• 把项目文件夹从XAMPP的htdocs目录移出来，放到任意非系统权限限制的文件夹（比如D:\Projects\restaurant-finder）。
• 清理依赖后重新安装：
  1. 在VS Code终端执行：

     rm -rf node_modules package-lock.json yarn.lock # Mac/Linux
     # 或者Windows命令：
     rmdir /s /q node_modules && del package-lock.json yarn.lock
     

  2. 重新安装依赖：npm install
• 启动项目时仔细查看终端输出：
  • 如果终端没有出现Compiled successfully! You can now view xxx in the browser. Local: http://localhost:xxxx这类提示，说明项目编译失败，优先解决终端里的报错（比如依赖缺失、语法错误、ESLint校验失败等）。
• 尝试用IP地址访问：直接在浏览器输入http://127.0.0.1:3000（对应终端显示的端口），跳过localhost解析环节。
• 检查端口占用情况：
  • Windows终端执行：netstat -ano | findstr :3000，找到PID后打开任务管理器结束对应进程；
  • Mac/Linux终端执行：lsof -i :3000，执行kill -9 [PID]杀掉进程；
  • 或者直接指定其他端口启动：npm start -- --port 3002
• 用管理员身份打开VS Code后再运行npm start，避免权限不足导致服务器启动失败。
• 暂时关闭系统代理（包括VPN、浏览器代理），部分代理会拦截localhost请求。

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