Make sure you are setting CORS headers.
My fetch looks like this:
const response = await fetch('/apps/ymm' + queryParams, {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
});
Topic summary
Shopify Remix app proxy calls from a theme block fail with CORS errors or 404s when the proxy or routes aren’t configured correctly.
Key fixes and setup:
- Move the API route into app/routes per Remix API routes docs, then reinstall the app so the proxy mapping refreshes.
- Point the App Proxy to the tunnel domain + your route path (e.g., https:///modelData) and fetch from the storefront using the proxy alias (e.g., /apps/api).
- Use public app proxy auth for proxy endpoints (authenticate.public.appProxy) rather than admin auth; several 302 → /auth/login or 404 issues were due to using admin auth.
- Ensure CORS: add appropriate headers or wrap the response with remix-utils/cors. Some users cleared /auth/login 404 by doing this.
- Update the proxy URL whenever the tunnel changes (Cloudflare/ngrok). In Remix, GET hits loader(), POST hits action().
Troubleshooting tips:
- Verify in the browser Network tab that /apps/ resolves and returns JSON; a 404 indicates the proxy path doesn’t match the route.
- If still failing, confirm the proxy points to a Remix route (not server root) and consider reinstalling the app.
Status: Original issue resolved; others confirmed fixes, though some still report 404/CORS, so discussion remains open.
1 Like