如何为JHipster网关应用配置SERVER_API_URL及默认API访问地址

SERVER_API_URL是JHipster前端用来指定后端API基础地址的核心配置，不同场景下的配置方式各有不同：

• 开发环境（本地调试时）
  如果你是带后端的网关应用，默认会自动关联后端API地址；但如果是用--skip-server创建的无后端网关，需要修改前端的环境配置文件：

  • 对于Angular项目：找到src/main/webapp/app/core/config/env.dev.ts（开发环境专属配置），将SERVER_API_URL的值修改为你的API服务地址，比如http://localhost:8081/api。
  • 对于React项目：打开src/main/webapp/app/config/env.js，调整SERVER_API_URL对应的配置项。
    注意：前端环境配置的优先级高于Gulp的配置文件，所以如果之前改了gulp/config.js没生效，是因为前端env文件的配置会覆盖它。

• 生产环境（构建部署时）
  构建生产包时，不需要硬编码配置，可以通过环境变量动态传递：

  • 如果你用Maven构建（即使是无后端网关，JHipster也会生成Maven配置）：

    SERVER_API_URL=http://your-production-api-domain/api ./mvnw -Pprod clean package
    

  • 如果是纯前端构建：

    SERVER_API_URL=http://your-production-api-domain/api yarn build
    

  这样构建出来的静态文件会自动使用你指定的API地址。

我之前也踩过这个坑——改了gulp/config.js但前端还是默认调用8080，其实问题出在配置优先级上：gulp/config.js只是用来控制前端开发服务器的运行端口，而API请求的目标地址是由前端自己的环境配置文件管理的，具体解决步骤如下：

1. 修改前端环境配置文件

   • Angular项目：打开src/main/webapp/app/core/config/env.dev.ts，找到SERVER_API_URL项，改成你的API服务地址：

     export const env = {
       production: false,
       SERVER_API_URL: 'http://localhost:8081/api'
     };
     

   • React项目：打开src/main/webapp/app/config/env.js，调整对应配置：

     const env = {
       production: false,
       SERVER_API_URL: 'http://localhost:8081/api'
     };
     export default env;
     

2. 重启开发服务器
   修改完配置后，一定要关掉当前运行的Gulp进程，重新执行gulp serve（或项目对应的启动命令），新配置才会加载生效。

3. 验证配置效果
   启动后打开浏览器开发者工具，查看网络请求的地址是否已经变成http://localhost:8081/api开头。如果还是有问题，清空浏览器缓存或者强制刷新页面（Ctrl+F5）即可。

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