前后端联调网络不通怎么修

常见场景对症下药

场景1：前端页面能打开，但请求失败

• 现象：Network面板显示 Failed to load resource: net::ERR_CONNECTION_REFUSED。

• 解决：

  • 后端没启动,启动后端。
  • 或者前端请求了 localhost:3000 但后端在 localhost:8080，需要配置代理（Vue/React的 devServer.proxy 或 Nginx反向代理）。

• 现象：Network面板显示 CORS 相关错误（Access-Control-Allow-Origin missing）。

• 解决：

  • 开发阶段：前端配置代理（推荐）或后端加 @CrossOrigin（Spring Boot）或 cors()（Express）。
  • 不要用：浏览器安装CORS插件（只能在本地暂时调试，无法解决线上问题）。

场景2：跨域问题（CORS）

• 现象：后端正常返回数据（状态码200），但浏览器提示 CORS policy: No 'Access-Control-Allow-Origin' header is present。
• 原因：浏览器同源策略阻止了不同端口/域名/协议的请求。
• 方案：
  1. 前端代理（推荐）：在 vite.config.js 或 vue.config.js 中配置 /api 代理到后端地址。
  2. 后端允许（临时）：后端添加 Access-Control-Allow-Origin: * 头（生产环境不建议）。

场景3：HTTPS与HTTP混合（请求被拦截）

• 现象：访问 https://yourdomain.com，页面脚本请求 http://api.xxx.com，浏览器直接拦截（混合内容）。
• 解决：统一使用 https，或者后端升级为HTTPS。

网络/系统层面排查

如果以上都没问题,可能是防火墙或DNS问题：

1. 防火墙拦截：

   • Windows：检查防火墙是否禁止了后端程序的端口（如8080）。
   • Mac/Linux：检查iptables或安全组规则（云服务器）。

2. 同一局域网访问（例如手机调试）：

   • 确认手机和电脑在同一WiFi下。
   • 电脑防火墙允许入站连接（尝试关掉防火墙测试）。
   • 后端启动时绑定 0.0.0 而不是 0.0.1（否则只能本机访问）。
   • 前端请求地址改为电脑的局域网IP（如 http://192.168.1.100:8080）。

3. DNS缓存：

   • 清除浏览器DNS缓存：chrome://net-internals/#dns 点击“Clear host cache”。
   • 命令行刷新系统DNS：ipconfig /flushdns（Windows）或 sudo killall -HUP mDNSResponder（Mac）。

终极排错法

1. 用命令行测试（跳过前端）：

   # Linux/Mac/Git Bash
   curl -v http://localhost:8080/api/user
   # Windows CMD
   curl http://localhost:8080/api/user

   • 能拿到数据：说明后端正常，问题在前端或代理配置。
   • 拿不到数据：后端有问题（Connection refused）或防火墙拦截。

2. 用Postman/ApiFox等工具测试：

   发送同样的请求,看能否成功，如果成功，基本可以断定是前端代码问题或跨域问题。

3. 检查前后端日志：

   • 前端：浏览器Network标签 -> 点击请求 -> 查看请求头（Headers）、请求体（Payload）、响应体（Preview/Response）。
   • 后端：控制台是否有报错日志（如 NullPointerException、SQLException），或者访问日志是否有记录该请求。

总结修通流程

1. 先确认后端能通：curl -v http://localhost:8080/api/health
2. 再看前端请求：浏览器Network里请求的URL是否正确？是否走了代理？
3. 解决常见问题：跨域加代理，路径错修正，启动错重启。
4. 检查环境：防火墙、局域网IP、端口绑定。

如果还是不通,建议把以下信息发出来：

• 后端地址和端口
• 前端请求的完整URL
• 浏览器Network中请求的状态（404，500，CORS，Connection refused）
• 后端控制台有无请求到达的日志

标签： 故障排查