两种方式的区别、风险与完整配置
很多同学第一次部署芋道（Ruoyi-Vue-Pro / 芋道源码）这种前后端分离项目，常见两种访问方式：
- 前端直接请求后端域名（把 API 地址写死成
https://api.xxx.com） - 前端只请求自身域名，Nginx 反向代理转发到后端（前端写
/api，Nginx 转发到127.0.0.1:48081）
这两种都能跑起来，但生产环境推荐的做法很明确： ✅ Nginx 反向代理（同域转发）更稳、更安全、更省心。
下面以芋道项目为例，带你从 0 配置到可用，并解释常见坑（比如你遇到的：为什么页面里会看到 localhost）。
1. 两种方式是什么？（先把概念讲明白）
方式 A：前端写死后端域名（直连后端）
结构通常是：
- 前端：
https://www.example.com - 后端：
https://api.example.com（或http://IP:48081）
前端代码里直接写死：
axios.defaults.baseURL = "https://api.example.com"
优点：
- ✅ 配置简单，改个地址就能跑
- ✅ 前端、后端可以独立部署到不同机器
缺点（生产更明显）：
- ❌ 需要配置 CORS（跨域），容易误配
- ❌ 后端域名暴露在公网，攻击/扫描成本低
- ❌ 统一限流、防刷、黑名单、WAF 不好做
- ❌ Cookie/会话类场景容易踩坑（跨域 Cookie、SameSite）
方式 B：Nginx 反向代理（同域转发）
结构通常是：
- 对外只暴露一个域名：
https://www.example.com - 前端请求：
https://www.example.com/api/... - Nginx 转发到：
http://127.0.0.1:48081/...
前端代码只写相对路径：
axios.defaults.baseURL = "/api"
优点（生产推荐）：
- ✅ 前后端同域：不用 CORS，Cookie/登录态更稳
- ✅ 后端真实地址不暴露（甚至可以只监听 127.0.0.1）
- ✅ Nginx 层可以统一做限流、防刷、日志审计、黑名单
- ✅ 更接近真实生产架构（尤其是 Java 项目）
缺点：
- ❌ 初次配置比直连稍复杂（但一次配置长期收益）
2. 你问的关键点：为什么页面里会看到 localhost？
这是很多人第一次用 Nginx 转发时的误会：
Nginx 的
proxy_pass http://127.0.0.1:48081，浏览器是看不到的。浏览器只会看到自己请求的域名，比如https://www.example.com/api/...。
那为什么你在 Network 或页面里看到 localhost？
