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

Retired Boards Appdev Store Design
6

Hey @Danh11 We’re also stuck at cors error just i’m not creating a theme .
I have created an app using shopify remix.

Created an route in the app which will open in browser rather than on the store admin app dashboard.

Updated the remix config files like this

if (
  process.env.HOST &&
  (!process.env.SHOPIFY_APP_URL ||
    process.env.SHOPIFY_APP_URL === process.env.HOST)
) {
  process.env.SHOPIFY_APP_URL = process.env.HOST;
  delete process.env.HOST;
}

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  publicPath: process.env.SHOPIFY_APP_URL + "/build/",
  ignoredRouteFiles: ["**/.*"],
  appDirectory: "app",
  serverModuleFormat: "cjs",
  includeRoutes: [
    require.resolve("./app/routes/api.jsx"), // Include your API route
  ],
  future: {
    v2_errorBoundary: true,
    v2_headers: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
    v2_dev: {
      port: process.env.HMR_SERVER_PORT || 8002,
    },
  },
};

As you can see I’ve give the public path with url where our app will be hosting I’ve named it SHOPIFY_APP_URL but it’ll be heroku url where our app is hosted.

We’ve to do it as when we use as proxy with default publivPath it try to access build files using shopify domain and there is error not found.

We’ve add that route as app proxy so we can access through the store.

Then we’ve hosted our app on the heroku and added that url like this heroku_url/app_route in app proxy.

Now we’re geting files but getting cors error while running that url as app aproxy.

css file is able to load but the build js files are giving cors errors.

I dont able to get where i will add cors headers so my store can access the shopify app build files hosted on heroku can remove cors errors