【Java后端+Vue前后端分离：内网正常、公网访问异常｜5个高频经典踩坑完整复盘】-育师

前言：做前后端分离项目开发时，相信很多开发者都遇到过这种极其折磨人的现象：本地内网、局域网访问完全正常，接口通、页面正常渲染、数据正常请求，一旦部署服务器、映射公网后，各种诡异问题集中爆发。
这类问题最让人头疼的点在于：本地无任何报错、代码无BUG、日志无明显异常，网上零散解决方案无法精准定位问题。本文结合我搭建Java+Vue工厂管理系统、数据可视化项目的真实部署经验，复盘内网正常、公网异常的5个最高频经典坑，附带完整排查思路、根因分析和落地解决方案，一次性彻底解决前后端分离公网适配问题。

一、问题前置场景

技术栈：SpringBoot Java后端 + Vue2/Vue3前端
部署场景：阿里云服务器部署、内网穿透调试、公网域名映射
统一异常特征：

本地localhost、127.0.0.1、局域网IP访问100%正常
服务器内网IP访问项目正常，接口连通、页面正常
公网域名/公网IP访问：接口404、跨域报错、静态资源加载失败、请求超时、登录失效、图片空白等各类问题

二、五大经典坑点：现象+根因+终极解决方案

坑点1：前端代理仅适配本地，公网环境未关闭/未适配

报错现象：本地开发依靠vue.config.js的proxy代理完美转发接口，内网访问正常；部署公网后，接口全部404、请求路径错乱。

核心根因：很多新手开发者全程依赖本地代理，误以为打包部署后代理依旧生效。Vue的proxy代理仅适用于本地开发环境，打包build后代理配置直接失效。公网环境下接口依然拼接本地localhost地址，导致请求全部指向本机，服务器无法识别接口路径。

解决方案：
区分开发环境与生产环境接口地址，做环境变量动态适配：

开发环境(.env.development)：使用本地代理 /api
生产环境(.env.production)：直接填写服务器公网后端地址，舍弃代理
同时打包前检查配置，避免生产环境强行走本地代理路径，彻底杜绝公网接口404问题。

坑点2：后端跨域配置不完善，仅适配内网IP段

报错现象：内网访问无跨域报错，公网访问浏览器直接报CORS跨域异常，接口请求被拦截。

核心根因：SpringBoot跨域配置写法不规范，很多人仅配置了允许本地、局域网IP跨域，未放开公网域名、公网IP的跨域权限。内网IP和公网域名属于不同请求源，内网放行不代表公网放行。

避坑方案：
摒弃固定IP放行的写法，采用全局规范跨域配置，允许生产域名、公网请求源访问，同时保留内网调试权限，适配多环境切换。禁止手写固定IP白名单，避免上线后跨域拦截问题。

坑点3：后端配置绑定内网IP，公网无法穿透访问

报错现象：服务启动成功，内网可连通，公网访问直接超时、连接拒绝。

核心根因：application.yml/application.properties中配置了server.address=内网IP。
该配置会让SpringBoot服务仅监听内网IP请求，不监听服务器公网网卡，公网发来的请求直接被系统拦截，看似服务正常运行，实则无法接收外网请求。这是前后端部署最隐蔽、最高频的坑。

解决方案：
删除server.address内网绑定配置，或配置为 0.0.0.0（监听所有网卡、所有IP段请求），同时放行服务器安全组、防火墙端口，保证公网请求可正常穿透到后端服务。