前端开发常见浏览器报错排查与解决

常见浏览器报错排查指南

以下是前端开发中浏览器访问页面时经常遇到的报错小坑，以及常见原因和解决办法（基于当前主流浏览器 Chrome / Edge / Firefox / Safari）：

1. ERR_CONNECTION_REFUSED / 无法连接到服务器

现象：浏览器显示'无法访问此网站'或'ERR_CONNECTION_REFUSED'

常见原因：

• 本地开发服务器没启动（npm run dev、yarn dev、vite、next dev 等没跑）
• 端口被占用
• 防火墙拦截了端口
• 访问了错误的地址（比如写成 http://localhost:3000 但服务跑在 5173）

解决：

• 确认开发服务器是否在运行
• 检查终端输出端口号（Vite 默认 5173，Create React App 默认 3000，Next.js 默认 3000）
• 用 netstat -ano | findstr :5173（Windows）或 lsof -i :5173（Mac/Linux）查看端口占用
• 换个端口启动：npm run dev -- --port 8888

2. ERR_EMPTY_RESPONSE / 页面一直加载不出来

现象：浏览器转圈圈很久，最终报'ERR_EMPTY_RESPONSE'

常见原因：

• 后端接口响应太慢或挂了（前端在等 fetch/axios 超时）
• 服务器端 CORS 配置错误，导致预检请求（OPTIONS）没响应
• 本地代理配置错误（vite.config.js / next.config.js）

解决：

• 检查 Network 面板，看是否有长时间 pending 的请求
• 确认后端服务是否正常（用 Postman 测试）
• 检查 CORS：后端要允许前端域名 + 方法 + 头

// Vite proxy 示例
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}

3. Blocked by CORS policy

现象：控制台报：

Access to fetch at 'http://xxx' from origin  has been blocked  CORS policy...