CORS issue when requesting data from shopify app (remix template) during local theme development

Retired Boards Appdev Store Design

Topic summary

Core Issue:
Developers encounter CORS errors when making requests from Shopify themes or extensions to Remix-based Shopify apps during local development, particularly when using app proxies or tunnels.

Primary Solution (Posts 4, 17, 19-20):

  • Install remix-utils package and use its cors() function
  • Handle OPTIONS preflight requests explicitly in both loader and action functions
  • For older Remix templates: Add serverDependenciesToBundle: [/^remix-utils.*/] to remix.config.js
  • For Vite-based templates: No config changes needed

Key Implementation Pattern:

if (request.method === 'OPTIONS') {
  return await cors(request, json({ status: 200 }));
}
const response = json({ data });
return await cors(request, response);

Important Caveats:

  • CORS errors typically occur when hosting on VPS/production servers, not with Cloudflare tunnel URLs during development
  • App proxy may not work in local development but functions correctly when deployed
  • For checkout extensions: Use authenticate.public.checkout(request) instead of authenticate.admin(request)
  • Session tokens require clicking the app in store admin at least once to initialize

Status: Multiple users confirmed the solution works after properly handling OPTIONS requests in loader functions.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
3

Unfortunately the request is still being blocked. There were a couple of typos which I think were a mistake? By Access-Control-Headers I assume you meant `

Access-Control-Allow-Headers`? Fixing them didn’t resolve the issue though.

As I’m using the Shopify app template, a lot of the server config is hidden and I can’t find a way to access or modify it. All that I can see is shopify.server.js. I’m not able to find any info on how to modify the express instance which I think is running.