App proxy showing 404 page

Retired Boards Appdev Store Design

Topic summary

App proxy returns 404 and appears to bypass the proxy endpoint; no traffic reaches the backend (e.g., Ngrok shows no requests). Screenshots show proxy setup and resulting responses.

Shopify staff update: Proxy paths can become “confused,” often when multiple apps register the same subpath. Suggested fix: uninstall all related apps, change proxy paths, and reinstall. Issue was raised internally.

Common causes and workarounds reported:

  • Proxy edits don’t always apply; removing the proxy and re-adding it is often required.
  • The proxy call originates from Shopify’s servers, so the Proxy URL must be publicly accessible (use Ngrok for dev).
  • 403 in Rails dev: add config.hosts << "dev-store.myshopify.com".
  • Subpath conflicts: try a different subpath (e.g., add “-1”).
  • Proxy settings aren’t updated on stores that installed before changes; fix per-store via Apps > About > Customize URL.
  • “Cache” trick: refresh App proxy config page, trigger a failed request via the extension, then reconfigure.
  • In stubborn cases, uninstall both the main and duplicate apps and reinstall.

Status: No definitive platform fix; recurring reports indicate the issue persists, with manual resets/reinstalls as the most reliable resolution.

Summarized with AI on December 19. AI used: gpt-5.
8

For anyone that is still getting a 403/404:

  1. Going to the proxy url in the browser should help you understand what’s going on, in my case – getting 403 – I needed to add this line ‘config.hosts << “dev-store.myshopify.com”’ to ‘/config/environments/development.rb’ in Rails
  2. Try different names for the “Subpath” if you are getting 404, the name that worked for me is ‘xoxo-1’ :slightly_smiling_face: hopefully I can change it soon, but for now it’s working!

In my case what helped – before I try the full proxy URL in the browser – was adding a ‘.catch’ to the JS request:

axios.get("/apps/xoxo-1")
    .then((res) => { console.log('API response to proxy request: ', res) })
    .catch((error) => {
      if (error.response) {
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else if (error.request) {
        console.log(error.request);
      } else {
        console.log('Error', error.message);
      }
    });

I hope that help!