How to enable CORS requests for files in the public directory?

[jahilldev]

I'm using Remix as a Shopify app. We're using the public directory to store some client assets for use in the store. The problem is, occasionally users will make a request to a file in the public directory from either {mydomain}.com, or {myStore}.myshopify.com.

Depending on which domain was used to include the assets on the store front, we get a CORS error.

I've done a little reading around this in the Remix docs, but I can't find anything that refers to files in the public directory.

Can someone point me in the right direction, please?

Many thanks!

[alexanderson1993]

For that, you'll have to use a custom server adapter, like express. Remix's default app server doesn't let you configure the headers on requests to the public folder, but if you're running a custom server you get all the control.

It'd look something like this:

import cors from 'cors';

const corsMiddleware = cors();

app.use('/public', cors(), express.static('public',  { maxAge: "1h" }));

// Remix fingerprints its assets so we can cache forever
app.use('/public/build', cors(), express.static('public/build',  { immutable:true, maxAge: "1y" }));

And then follow the rest of the Express example: https://remix.run/docs/en/main/other-api/adapter#createrequesthandler

[Himanshu029]

I also faced the same problem, When I upgrade the shopify and remix version, did you find a solution?