Local Shopify App Development With Docker: Request Origin Could Not Be Verified

- 1 answer

So I have a dockerized shopify app (Node / React) which I want to improve. Naturally I would like to be able to make changes locally and test them in my local environment prior to publishing them to the stage environment.

I almost got my setup up and running, however once I install my locally running app in a shopify dev store I get the error: Request origin could not be verified

The reason for this is probably the callback url, which is: https://shopify-app.local/auth/callback?... and not the ngrok-url.

In my ngrok.conf I set the host_header to shopify-app.local:

region: eu
authtoken: [MY_TOKEN]
log: stdout
    proto: http
    addr: https://shopify-app.local
    host_header: shopify-app.local

(This is necessary for the proxy to correctly distribute the traffic and that part is actually working - my app receives incoming traffic).

So I guess what I'm missing here is to set the appropriate host-header in the responses to the ngrok-generated url. But where and how would I do this?

I'm using the infamous jwilder/nginx-proxy

For a better understanding, my setup looks like this: My Setup



In case anybody stumbles upon this, the solution was as simple as adding add_header Host [ngrok-address] always; to the location directive in the nginx-configuration for the appropriate service.

I managed it by creating a file /nginx/vhost.d/[vhost-name]_location in my project-folder, mount this folder as volume to the proxy with the docker-compose.yml and added the beforementioned line to it. This file is then picked up by the proxy once it is started with docker-compose

See jwilder-nginx Documentation and nginx-documentation for more information.