Vue 3 响应拦截器不能直接切换服务器地址，因受同源策略限制且无法探测后端健康状态；真正容错应由 Nginx 反向代理层实现，通过 upstream 配置主备节点与 proxy_next_upstream 自动重试，前端只需统一请求 /api/ 路径。
Vue 3 的响应拦截器本身不能直接切换服务器地址——它运行在浏览器端，无法感知后端集群拓扑，也不具备重试不同域名或 IP 的能力。真正实现“服务器宕机时自动切备用地址”的逻辑，必须由 Nginx（或其他反向代理层）完成，前端只需确保请求始终发往同一个代理路径（如 /api/），把容错交给网关。
为什么前端拦截器不适合做备用地址切换
浏览器环境受限于同源策略和网络不可见性：
- axios 响应拦截器只能捕获已发出请求的返回结果（比如 502、504），但无法主动探测其他后端是否存活；
- 若在拦截器里手动修改
config.baseURL并重发请求，会破坏原有请求上下文（如取消 token、丢失请求参数、重复提交表单）； - 多个并发请求可能各自尝试不同地址，导致状态不一致或接口幂等性被破坏；
- 前端硬编码多套地址（如内网/外网/IP列表）违背部署解耦原则，也难以做健康检查与自动恢复。
正确做法：用 Nginx 实现上游自动容错
把“切换备用服务器”这件事交给更合适的位置——Nginx 反向代理层。Vue 项目只需静态托管 + 统一代理 API 路径，所有容错逻辑由 Nginx 承担。
- 定义 upstream 集群，包含主节点与 backup 节点：
upstream api_backend {
server 192.168.1.10:3000 max_fails=3 fail_timeout=30s;
server 192.168.1.11:3000 max_fails=3 fail_timeout=30s;
server 127.0.0.1:3001 backup;
} - 在 location 中启用容错重试：
location /api/ {
proxy_pass http://api_backend/;
proxy_next_upstream error timeout http_502 http_504;
proxy_next_upstream_tries 3;
proxy_next_upstream_timeout 10s;
} - Vue 项目中保持 axios baseURL 为
/api/（走本地代理），无需任何切换逻辑。
前端可配合做的轻量级兜底
虽然主力容错在 Nginx，但前端仍可加一层友好提示或降级策略：
立即学习“前端免费学习笔记（深入）”；
- 响应拦截器中识别连续多次 502/504，显示“服务暂时不可用，请稍后再试”；
- 对非关键接口（如统计、日志上报），可在拦截器捕获失败后静默丢弃或存入 IndexedDB 延迟重发；
- 不建议在拦截器中主动跳转备用域名（如从
https://api.example.com切到https://backup.example.com），这属于跨域且不可靠。
真正的高可用不是前端拼凑多地址，而是让请求路径稳定、代理层智能、上下游契约清晰。Vue 3 拦截器专注处理业务语义（如 401 跳登录、统一 data 提取），Nginx 专注处理传输语义（如节点故障转移、超时重试）。两者分工明确，系统才健壮。
