502 Bad Gateway Error with Shopify App - Unable to Reach Origin Service

Shopify Apps

Topic summary

Persistent 502 Bad Gateway when loading a Shopify embedded app through the admin (iframe). Error message: “Unable to reach the origin service. The service may be down or it may not be responding to traffic from cloudflared.”

Context and setup:

  • React Router (Shopify app template) with server‑side rendering; Prisma (SQLite dev).
  • Node v20.19+ (or v22.12+), Shopify CLI latest, Windows 10/11.
  • Tunnel via ngrok (free tier) and also tried Cloudflare Tunnel; app is embedded.

What works vs. fails:

  • Works when accessed directly at http://localhost:PORT.
  • Fails only when opened inside Shopify Admin’s embedded iframe via the tunnel.

Checks already done:

  • Local dev server running; port (e.g., 3000) accessible.
  • Env vars (SHOPIFY_API_KEY, SHOPIFY_API_SECRET, etc.) set.
  • Prisma DB connects; dependencies installed; ES module import paths fixed; routes and auth configured.

Notes:

  • 502 indicates the tunnel/reverse proxy can’t reach the local origin; “cloudflared” refers to Cloudflare’s tunnel client.
  • Includes an error screenshot (not essential to reproduce).

Status: Unresolved; user seeks guidance on tunnel/origin reachability for the embedded app.

Summarized with AI on December 22. AI used: gpt-5.
1

I’m experiencing a persistent 502 Bad Gateway error when trying to access my Shopify app through the admin panel. The error message states: “Unable to reach the origin service. The service may be down or it may not be responding to traffic from cloudflared.”

The app works perfectly when accessed directly via http://localhost``:PORT, but fails when accessed through the Shopify admin panel via the tunnel.

My Setup

  • Framework: React Router (Shopify App Template)
  • Node Version: >=20.19
  • Shopify CLI: Latest version
  • Tunnel Service: ngrok (also tried Cloudflare tunnel)
  • OS: Windows 10/11
  • App Type: Embedded app

=======

Error Details

The app shows:

  • 502 Bad Gateway
  • “Unable to reach the origin service. The service may be down or it may not be responding to traffic from cloudflared”

What I’ve Verified

:white_check_mark: Local Server Works: The app loads correctly at http://localhost:PORT
:white_check_mark: Server is Running: The dev server starts successfully
:white_check_mark: Port is Accessible: Verified port 3000 is not blocked
:white_check_mark: Environment Variables: All required env vars are set (SHOPIFY_API_KEY, SHOPIFY_API_SECRET, etc.)
:white_check_mark: Database Connection: Prisma connection works fine
:white_check_mark: Import Paths: Fixed all ES module import paths with .js extensions
:white_check_mark: Dependencies: All packages installed correctly (@shopify/polaris, etc.)==- The app uses React Router with server-side rendering

  • Using Prisma for database (SQLite in development)

  • All routes are properly configured with authentication

  • The error occurs specifically when Shopify tries to load the embedded app iframe## Environment

  • OS: Windows 10/11

  • Node: v20.19+ or v22.12+

  • Package Manager: npm

  • Tunnel: ngrok (free tier) / Shopify CLI default tunnel

Any help or guidance would be greatly appreciated! Thank you in advance.

image
image1172×558 29.7 KB

2

Might be a better question on .dev and not here. You’ll find better help there - trust me.

3

Thanks for your reply.
I’ve already solved this problem.