Hey everyone, I’m having some trouble with my Shopify App Proxy. I set it up using Shopify-CLI and configured it like this:
Prefix: myapp
Subpath: proxy
Proxy: https://mysite.example.com/proxy
I’m trying to access it in my theme.liquid file with this AJAX request:
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('Response:', xhr.responseText);
}
};
xhr.open('GET', '/myapp/proxy/data', true);
xhr.send();
The weird thing is, I can access the URL directly in my browser and it works fine. But when I try the AJAX request on my test store, I keep getting a 404 error.
I’ve tried changing the prefix and subpath, and even deleted an old app to avoid conflicts, but nothing seems to work. This is a public app, if that matters.
Any ideas what I might be doing wrong? Thanks for any help!
I encountered a similar issue when setting up my Shopify App Proxy. One thing that often gets overlooked is the importance of the proxy URL’s structure. Ensure your proxy URL exactly matches the format Shopify expects: your-app-domain.com. Also, double-check your app’s settings in the Shopify Partner Dashboard. Sometimes, the proxy settings there don’t sync properly with what’s in your local config. If all else fails, try clearing your browser cache and testing in an incognito window to rule out any caching issues. Lastly, verify that your server is correctly handling the proxy requests. Log the incoming requests on your server to see if they’re reaching it at all. This can help pinpoint whether the issue is on Shopify’s end or yours.
Have you considered the possibility of a caching issue? Sometimes, Shopify’s CDN can cache responses, leading to unexpected 404 errors. Try adding a cache-busting parameter to your AJAX request, like this:
xhr.open('GET', '/apps/myapp/proxy/data?_=' + new Date().getTime(), true);
This appends a timestamp to the URL, forcing a fresh request each time. Also, ensure your server is sending appropriate cache-control headers to prevent unwanted caching.
Another often overlooked aspect is the app’s installation status. Verify that your app is properly installed on the test store. Sometimes, partial installations or permission issues can cause proxy requests to fail silently.
If these don’t help, try enabling verbose logging on your server and Shopify app to trace the request path. This can reveal any potential mismatches between how Shopify is routing the request and how your server is expecting to receive it.
hey mate, have u checked ur cors settings? sometimes that can mess with ajax requests even if the url works fine in the browser. try adding the appropriate headers on ur server side to allow cross-origin requests from ur shopify domain. might solve ur issue!
yo dude, have u tried checkin ur server logs? sometimes the issue isnt on the shopify side but ur own server. make sure its actually receivin the requests. also, double check ur proxy url in the shopify admin panel matches exactly wut u set up. those tiny details can be a real pain sometimes lol
I’ve dealt with similar 404 errors when setting up App Proxies. One thing that’s easy to overlook is the path in your AJAX request. Try changing ‘/myapp/proxy/data’ to ‘/apps/myapp/proxy/data’. Shopify automatically prepends ‘/apps/’ to proxy requests, so your current path might not be reaching the proxy correctly.
Also, double-check your app’s scopes. Ensure you’ve included the necessary read/write permissions for the resources you’re trying to access through the proxy. Sometimes, missing scopes can cause unexpected 404s.
Lastly, if you’re using a development store, make sure it’s on a paid plan. Some features, including App Proxy, don’t work on free development stores. This caught me out once and took ages to figure out!
If none of these work, consider temporarily adding some logging on your server to see if the requests are even reaching it. This can help narrow down whether it’s a Shopify routing issue or something on your end.