对比了前后端分离项目（以芋道为例）的两种部署方式：前端直连后端域名与 Nginx 反向代理。分析了跨域、安全性及运维成本差异，指出生产环境推荐使用 Nginx 同域转发方案。提供了后端监听配置、前端 Axios 设置及 Nginx 反向代理的具体配置步骤，并排查了开发环境中常见的 localhost 访问问题，帮助开发者建立更稳健的生产架构。
很多同学第一次部署芋道（Ruoyi-Vue-Pro / 芋道源码）这种前后端分离项目，常见两种访问方式：
https://api.xxx.com）/api，Nginx 转发到 127.0.0.1:48081）这两种都能跑起来，但生产环境推荐的做法很明确： ✅ Nginx 反向代理（同域转发）更稳、更安全、更省心。
下面以芋道项目为例，带你从 0 配置到可用，并解释常见坑（比如为什么页面里会看到 localhost）。
结构通常是：
https://www.example.comhttps://api.example.com（或 http://IP:48081）前端代码里直接写死：
axios.defaults.baseURL = "https://api.example.com"
优点：
缺点（生产更明显）：
结构通常是：
https://www.example.comhttps://www.example.com/api/...http://127.0.0.1:48081/...前端代码只写相对路径：
axios.defaults.baseURL = "/api"
优点（生产推荐）：
缺点：
这是很多人第一次用 Nginx 转发时的误会：
Nginx 的
proxy_pass http://127.0.0.1:48081，浏览器是看不到的。浏览器只会看到自己请求的域名，比如https://www.example.com/api/...。
那为什么你在 Network 或页面里看到 localhost？只有几种可能：
http://localhost:48081（最常见）后端通常是 Spring Boot Jar，监听一个端口，比如 48081：
server:
port: 48081
如果你要直连后端域名（例如 api.example.com），一般会：
IP:48081（不推荐）⚠️ 安全建议：如果要暴露后端到公网，至少要做到：
假设后端对外是：
https://api.example.com/admin-api前端配置（以常见封装为例）：
// 生产环境 axios.defaults.baseURL = "https://api.example.com"
如果你的后端 API 前缀是 /admin-api，那通常前端请求会是：
https://api.example.com/admin-api/xxx因为前端域名和后端域名不同（跨域），必须配置 CORS，否则浏览器直接拦。
典型错误：为了省事把 allowedOrigins=* 全放开
这在生产很危险。
更合理的做法是：只允许你的前端域名：
https://www.example.com（具体芋道版本/模块 CORS 配置位置可能不同，但原则一致：别写成 *，别乱放开）
这才是本文的重点：芋道生产推荐方案。
让后端对外'不可见'，只给 Nginx 转发即可：
server:
port: 48081
address: 127.0.0.1 # ★关键：仅本机可访问
并且防火墙不要放行 48081。
这样做的效果是： ✅ 外面扫描不到你的 Java 端口 ✅ 只有 Nginx（同机）能访问后端
前端不要再写后端域名，改成：
axios.defaults.baseURL = "/api"
重新打包：
npm run build
把 dist 放到你的站点目录，比如：
/www/wwwroot/yudao-front/dist
在 Nginx 站点配置文件中写成类似下面（按你的实际域名、目录改一下）：
server {
listen 80;
server_name www.example.com;
# 前端静态资源
location / {
root /www/wwwroot/yudao-front/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
# 后端接口代理：把 /api/ 转到本机的 48081
location /api/ {
proxy_pass http://127.0.0.1:48081/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
你可以先不配 HTTPS，通了以后再申请证书，然后把 80 升级到 443。
芋道经常有：
/admin-api（管理端）/app-api（APP）/mp-api（公众号/小程序，视项目而定）你有两种常见选择：
/api，Nginx 直接转发到后端根路径（推荐）前端请求 /api/admin-api/...
Nginx 转发到 http://127.0.0.1:48081/admin-api/...
对应 Nginx：
location /api/ {
proxy_pass http://127.0.0.1:48081/;
}
这样 /api/ 会被去掉一层前缀，路径自然对齐。
比如：
location /admin-api/ {
proxy_pass http://127.0.0.1:48081/admin-api/;
}
location /app-api/ {
proxy_pass http://127.0.0.1:48081/app-api/;
}
前端就直接请求 /admin-api、/app-api，不需要再包一层 /api。
两种都可以，推荐第 1 种（前端统一 /api，更利于后续加网关/限流）。
说明：前端 baseURL 还是 localhost 检查是否有环境变量配置，例如：
.env.productionconfig.jsrequest.js确保生产环境只用：
baseURL: "/api"
说明：后端返回了拼好的绝对地址，常见于：
解决思路：
localhost一般是反向代理 header 没带全 或 Spring 没识别 forward headers。
Nginx 必带：
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
Spring Boot 建议开启：
server:
forward-headers-strategy: native
并且你说：不部署 PHP，只部署 Java 服务 那最终推荐非常明确：
✅ 生产环境优先选择：Nginx 反向代理（同域转发）
理由：更安全、无跨域、登录态更稳、运维能力更强
否则生产不建议。
✅ 后端
server.port=48081server.address=127.0.0.1✅ 前端
baseURL="/api"npm run build✅ Nginx（站点配置）
/ → 前端静态资源/api/ → proxy_pass http://127.0.0.1:48081/✅ 验证
www.example.com/api/...localhostIP:48081（公网）访问不到部署这一步，很多人追求'先能跑起来'，然后在生产上留下隐患。 你现在主动从'直连后端'升级到'同域反向代理'，其实就是在做正确的工程化实践。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online