Cors error while opening local url generated by shopify cli

[myvirtualteams]

My problem is that I’m developing an app in shopify remix. When I run script npm run dev. It gives me a local url to check my changes.
On that url I have route where my main products will display.
What happening here is that I’m geeting cors error while opening that url.

As you can see I’m getting cors error and my js file from build not able to load and I’m unable to test the functionality.

It’s working when I open cloudflare url generated by shopify cli.

I’ve tried adding headers in

app.jsx

entry.server.jsx

But nothing is working.

Can you please tell me how would I remove this error.

As I am hosting my app on heroku and using that app as proxy url so store can show my products. Because of cors error only UI is rendering not the js.

[Liam]

Hi Myvirtualteams,

It sounds like your local server (localhost) is trying to access resources from another origin (Heroku), which is causing the CORS error.

Here are a few solutions you can try:

1. Enable CORS in your Heroku app: The server where you host your app should have CORS enabled. If you’re using Express.js, you can use the cors middleware to enable CORS. ``
2. Configure Shopify App Bridge: Shopify App Bridge provides a middleware that adds necessary headers to your responses to enable communication between your embedded app and Shopify Admin.
3. Use a Proxy to Avoid CORS: If you can’t enable CORS in your server or the Shopify App Bridge doesn’t work for you, another option is to set up a proxy server. The proxy server makes the requests to the other origin on behalf of your app.

Try the above options and let us know if you’re still running into issues.

[myvirtualteams]

I’m using remix shopify

No I am not able to solve the issue..

Like I have been try to check my app on local url generated by shopify cli.

Then if it tries to get the build files it throws cors error.

Not able to pass access control allow origin for these files

[myvirtualteams]

@Liam Please reply, I’m kinda stuck at this

[virajamara]

Hi @myvirtualteams Could you able to find a solution to this?

[dhmics]

Use cors method from @remix-utils before returning to API something like

return cors(request, json(returnValue))