Nuxt项目部署至生产环境后请求地址错误如何修复

排查路径 #

• 先查前端代码硬编码问题
  全局搜索前端项目源码中所有localhost、127.0.0.1字符串，重点定位出问题接口的请求代码：
  • 核对全局请求封装的baseUrl是否正确读取生产环境变量，.env.production文件中是否误填了本地地址
  • 检查出问题的接口是否单独写死了全路径请求地址，没有走全局统一的请求基地址配置——这是这类问题最高发的原因，开发时为了调试单独写了本地地址，上线前漏改
• 再查反向代理/网关配置
  核对Nginx、API网关的转发规则，重点看proxy_set_header Host配置项：如果针对特定路径的转发规则里误把Host设成了localhost，后端拿到Host值后拼接的接口、回调地址就会指向localhost。
  典型错误配置参考：

  location /api/error-endpoint {
      proxy_pass http://127.0.0.1:8080;
      proxy_set_header Host localhost; # 这行配置错误会导致后端生成的地址带localhost
  }
  

• 核对后端服务配置
  检查后端框架的域名相关配置：比如Java服务的server.domain配置、PHP框架的APP_URL参数、Node服务的CORS origin配置，重点查需要后端拼接全路径返回的接口（比如文件上传返回的访问地址、支付回调地址、分页链接），这类接口如果读了本地调试的配置项，就会返回带localhost的地址。
• 最后查缓存问题
  如果以上配置都没问题，检查是否存在缓存导致的新旧代码混用：CDN、Nginx或者用户本地浏览器缓存了旧版本的前端JS资源，旧资源里写死了localhost地址，新发布的资源用了正确的生产地址，就会出现部分接口正常、部分请求指向localhost的情况。

修复方案 #

• 前端所有接口请求统一走全局封装的请求实例，禁止单个接口硬编码全路径地址，不同环境的请求基地址通过环境变量注入，上线前自动校验环境变量值
• 反向代理统一配置proxy_set_header Host $host;，转发时携带真实生产域名，针对每个路径的转发规则单独校验，不要硬编码localhost作为Host值
• 后端拼接全路径时优先从请求头读取真实Host值，不要硬编码配置文件中的本地地址，生产环境配置文件中的域名参数统一替换为实际生产域名
• 前端构建时给JS、CSS静态资源加内容hash后缀，入口HTML文件配置不缓存，部署后同步清理CDN、网关层的旧资源缓存，避免新旧代码混用

错误请求示例图
正确请求示例图

内容的提问来源于stack exchange，提问作者Man Rofak