Im using an embeded app (Node react) when a customer is redirected to billing page ,Im facing an iframe error.

Refused to display 'https://lancome-staging.myshopify.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

I have deployed the App in Heroku and Shopify consultant told me its not a problem related to code rather than an issue in Heroku Server settings. How can i edit the headers in Heroku and which file do i have to edit and how can i access it ?

enter image description here

CodePudding user response：

The fact that you are seeing NGROK at Heroku is most troubling. A deployment to Heroku is production code, and in no way, shape, or form, should there be any connections to NGROK. It seems your developer may either have deployed development code to Heroku, or perhaps you deployed a developer API set of keys to Heroku? Either way, ensure you have deployed production code and production API keys to Heroku.

CodePudding user response：

When you deploy the app to heroku you need to make sure that all the URLs you were using in the local environment are replaced.

1. You need to update (or add) the heroku URLs under your app in shopify.dev
2. You need to update the environment variable using heroku config:edit so that the variable that you used (typically HOST) is pointing to the heroku URL

Once you're sure that you never put your ngrok URL in the code, at least, you should have a different error.