App proxy showing 404 page

nerdymind
New Member
1 0 0

We're building an app for a client and having issues setting up the App Proxy. We've added to our apps extensions section (see screenshot) but when accessing the site via the proxy we're just seeing a 404 response (as if it's accessing the Shopify store directly as apposed to hitting the Proxy).

 

If I update the proxy to use ngrok so I can see the traffic there are no requests being made, which makes me think Shopify is bypassing the proxy entirely. I've found a bunch of posts with similar issues but no resolution:

 

https://community.shopify.com/c/Shopify-APIs-SDKs/Help-needed-with-App-Proxy-not-working/td-p/522693

https://community.shopify.com/c/Shopify-APIs-SDKs/Shopify-app-proxy-never-working-for-me/td-p/353453

https://community.shopify.com/c/Shopify-APIs-SDKs/App-Proxy-not-working/td-p/295985

 

I'm hoping I can break the chain of unresolved issues on this!

 

Here some screenshots of the Proxy setup, the app response (when accessing the Proxy URL directly), the response received when accessing the Proxy URL via shopify (e.g. store.myshopify.com/apps/gg-product-options) and the response returned the from the store:

Proxy setupProxy setupProxy URL responseProxy URL responseProxy through myshopify.com URLProxy through myshopify.com URLProxy through myshopify.com URL responseProxy through myshopify.com URL response

 

Finally, just for testing, I've completely opened up that URL on the app side to accept all requests/headers/etc. You can see the results of the test by accessing this URL directly: https://ridegg.nerdstaging.com/proxy (as of 3/3/2020, won't be valid once I get this working). Once I'm able to get the proxy working correctly I'll add validation in, but for now, I kept it open just to rule it out as an issue.

 

Any and all help is greatly appreciated!!

0 Likes
SBD_
Shopify Staff
Shopify Staff
1044 141 184

Hey @nerdymind,

 

In this case it appears the proxy paths are getting confused on our end. For example, /apps/gg-product-options-1 works (note the -1)

This might be a result of installing two apps that try to register the same proxy (maybe the dev app).

I've raised this internally. In the mean time, try uninstalling both apps, changing the proxy paths and reinstalling.

 

Keep you posted.

0 Likes
pjjeev
New Member
1 0 3

Is there any update on this issue ? I am also facing the same error of 404. The proxy does not call the URL provided.

Hugo92
New Member
2 0 0

Any update for this? I have exactly such a problem.

0 Likes
future_friend
Tourist
5 0 0

I am thirding this post. Help!

0 Likes
future_friend
Tourist
5 0 0

I don't know if it'll work for others, but I simply had to just delete the proxy settings and reinstall them. I think I entered them wrong the first time and I couldn't get Shopify to reset until I did so.

0 Likes
josephmcdermott
New Member
3 0 0

Just in case it helps some people, as I was banging my head against the wall on this. I was using a local dev environment to test the Shopify App signup and App page processes, which work fine as the requests come from directly your browser.

The app-proxy, on the other hand, involves Shopify's backend (not your browser) making an HTTP request to your Proxy URL to download the contents of your page.

In my case, the Proxy URL I was using was not publicly accessible, so once I switched to use Ngrok it worked fine.

0 Likes
KarimTarek
Shopify Partner
20 0 3

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' 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!

Shopify development consultant @ bespark.ca
0 Likes