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.
16

Did you try it by running by hosting urls somewhere
I hosted my app on a VPS and I am getting the cors error