如何解决Shopify App Node模板启动的请求转发聚合错误？

问题描述 #

我正在搭建首个Shopify App，目标是创建Express.js API通过GraphQL修改店铺前端自定义元字段值，但卡在开发环境搭建阶段。使用shopify-app-template-node模板，执行npm run dev后访问预览页，浏览器无响应，控制台反复输出Error forwarding web request: AggregateError，预期能看到应用基础首页。

环境信息 #

• web/index.js和web/shopify.js文件与仓库版本完全一致
• 当前仅需正常运行基础版本，后续计划暴露3个接口
• 仅访问预览页时才会出现该错误
• 已在./、./web和./web/frontend目录执行npm install
• Shopify CLI为最新版@shopify/cli/3.67.1

完整运行日志 #

> mj-wishlist-app@1.0.0 dev
> shopify app dev


╭─ info ─────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                    │
│  Using shopify.app.toml for default values:                                                        │
│                                                                                                    │
│    • Org:             dev                                                                          │
│    • App:             mj-wishlist-app [local]                                                      │
│    • Dev store:       xxxx.myshopify.com                                                           │
│    • Update URLs:     Yes                                                                          │
│                                                                                                    │
│   You can pass  `--reset`  to your command to reset your app configuration.                        │
│                                                                                                    │
╰────────────────────────────────────────────────────────────────────────────────────────────────────╯


15:12:49 │      graphiql │ GraphiQL server started on port 3457
15:12:50 │   web-backend │
15:12:50 │   web-backend │ > shopify-app-template-node@1.0.0 dev
15:12:50 │   web-backend │ > cross-env NODE_ENV=development nodemon index.js --ignore ./frontend
15:12:50 │   web-backend │
15:12:50 │  web-frontend │
15:12:50 │  web-frontend │ > shopify-frontend-template-react@1.0.0 dev
15:12:50 │  web-frontend │ > vite
15:12:50 │  web-frontend │
15:12:51 │  web-frontend │
15:12:51 │  web-frontend │   VITE v5.4.7  ready in 414 ms
15:12:51 │  web-frontend │
15:12:51 │  web-frontend │   ➜  Local:   http://localhost:49717/
15:12:51 │   web-backend │ [nodemon] 2.0.22
15:12:51 │   web-backend │ [nodemon] to restart at any time, enter `rs`
15:12:51 │   web-backend │ [nodemon] watching path(s): *.*
15:12:51 │   web-backend │ [nodemon] watching extensions: js,mjs,json
15:12:51 │   web-backend │ [nodemon] starting `node index.js`
15:12:52 │   web-backend │ [shopify-api/INFO] version 11.4.0, environment Node v20.15.1
15:12:52 │   web-backend │ [shopify-api/INFO] Future flag lineItemBilling is disabled.
15:12:52 │   web-backend │
15:12:52 │   web-backend │   Enable this flag to use the new billing API, that supports multiple line items per plan.
15:12:52 │   web-backend │
15:12:52 │   web-backend │ [shopify-api/INFO] Future flag customerAddressDefaultFix is disabled.
15:12:52 │   web-backend │
15:12:52 │   web-backend │   Enable this flag to change the CustomerAddress classes to expose a 'is_default' property instead of 'default' when fetching
data.
15:12:52 │   web-backend │
15:12:52 │   web-backend │ [shopify-api/INFO] Future flag unstable_managedPricingSupport is disabled.
15:12:52 │   web-backend │
15:12:52 │   web-backend │   Enable this flag to support managed pricing, so apps can check for payments without needing a billing config. Learn more at
https://shopify.dev/docs/apps/launch/billing/managed-pricing
15:12:52 │   web-backend │
15:13:17 │   web-backend │ [shopify-app/INFO] Running ensureInstalledOnShop
15:13:18 │   web-backend │ [shopify-app/INFO] App is installed and ready to load | {shop: xxxxx.myshopify.com}
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError

排查建议 #

• 检查端口占用：日志显示前端服务运行在http://localhost:49717/，用lsof -i :49717（macOS/Linux）或netstat -ano | findstr :49717（Windows）确认端口是否被其他进程占用，杀掉冲突进程后重启服务。
• 重置应用配置：执行npm run dev --reset，让Shopify CLI重新生成配置文件，排除旧配置引发的转发问题。
• 直接验证前端服务：访问http://localhost:49717/，确认前端页面能否正常加载。如果无法访问，删除web/frontend下的node_modules和package-lock.json，重新执行npm install后启动服务。
• 核对配置文件：检查shopify.app.toml中的app_url、frontend_url等配置，确保本地开发URL与CLI启动的服务端口匹配。
• 获取详细日志：执行SHOPIFY_LOG_LEVEL=debug npm run dev，查看更详细的转发错误细节，定位是后端还是前端的请求转发失败。
• 切换Node.js版本：当前使用Node v20.15.1，尝试切换到Node v18（LTS版本），用nvm等工具切换后重新安装依赖并启动服务，验证版本兼容性问题。

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