Grails 3.3.4多项目构建Angular Profile端口修改后请求异常排查

我帮你分析下这个问题——Angular子项目报错请求localhost:8080/application被拒绝，核心原因是前端API请求配置或Grails代理规则没跟上你修改的端口和上下文路径。下面一步步排查修复：

1. 检查Angular项目的API基础地址配置 #

Angular默认会把API请求指向Grails后端的默认地址，你需要同步更新这些配置：

• 打开src/main/client/src/environments/environment.ts（开发环境）和environment.prod.ts（生产环境），找到类似apiUrl的配置项，替换为Web Profile项目的正确地址：

  export const environment = {
    production: false,
    apiUrl: 'http://localhost:8110/coffee' // 对应你的Web项目端口+上下文路径
  };
  

• 全局搜索Angular代码里的8080或application字符串，排查是否有硬编码的API地址，一并替换。

2. 修正Grails Angular Profile的代理配置 #

Grails的Angular Profile默认会用代理转发前端API请求到后端，这个代理规则可能还保留着默认值：

• 在Angular项目根目录创建或修改proxy.conf.json，确保代理规则指向你的Web项目：

  {
    "/api/*": {
      "target": "http://localhost:8110/coffee",
      "secure": false,
      "changeOrigin": true
    }
  }
  

• 打开Angular项目的build.gradle，找到npm_run_start配置，确认它引用了这个代理文件：

  npm_run_start {
    args = ['--proxy-config', 'proxy.conf.json']
  }
  

3. 配置Web Profile项目的CORS规则 #

因为前端和后端现在运行在不同端口，需要允许跨域请求：

• 在Web项目的application.yml中添加CORS配置：

  grails:
    cors:
      enabled: true
      allowedOrigins:
        - "http://localhost:4230" # Angular项目的运行地址
      allowedMethods:
        - GET
        - POST
        - PUT
        - DELETE
        - OPTIONS
      allowedHeaders:
        - "*"
  

4. 清理缓存并重新构建 #

旧缓存可能导致配置不生效，执行以下步骤：

• 停止所有运行的服务
• 进入coffee-ui目录，删除node_modules/.cache文件夹（Windows对应node_modules\.cache）
• 在主项目根目录运行gradlew clean清理Grails构建缓存
• 重新启动服务：gradlew bootRun --parallel --stacktrace --info

问题根源说明 #

你按照教程合并Angular Profile的客户端/服务器结构后，默认的API请求地址、代理规则依然指向Grails的默认端口8080和上下文路径application。修改端口和路径后这些配置没有同步更新，导致Angular前端发起XHR请求时访问了错误地址，最终被Zone.js捕获抛出错误（也就是你看到的core.es5.js和zone.js追踪信息）。

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