Ecommerce Shopify WordPress Discussion

Shopify: Thank-You Page Not Redirecting To The Actual Domain When Using NGINX As A Reverse Proxy

I have set up NGINX on Heroku's infrastructure to manage domain mapping for my store, bypassing Shopify's built-in domain configuration. Here's an overview of my NGINX configuration: upstream app_server { server unix:/tmp/nginx.socket fail_timeout=0; } server { listen <%= ENV["PORT"] %>; server_name _; keepalive_timeout 5; port_in_redirect off; location / { proxy_pass https://stagingstore.myshopify.com; client_max_body_size 10m; client_body_buffer_size 128k; proxy_connect_timeout 90; # proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location ~ ^/(search|category)/? { proxy_pass http://app_server; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } I've configured NGINX to handle incoming requests in a specific way. Requests to search and category pages are directed to a separate backend setup, while all other pages are intended to be served by Shopify itself. I have successfully managed the entire flow, from adding items to the cart to reaching the checkout process, using my custom domain. However, I encountered an issue with Shopify's automatic redirection to the thank you page. Instead of using my custom domain, Shopify redirects to a thank you page with their generated store name that includes the 'myshopify' domain. The page displayed is not valid. Interestingly, if I manually change the 'myshopify' domain to our custom domain in the URL and refresh the page, it loads the proper thank you page as desired. I've spent several days experimenting with different configurations, but I haven't found a solution. I would greatly appreciate it if someone could provide guidance on resolving this issue.
Shopify's redirection uses the original domain, which in this case is the 'myshopify' domain, instead of utilizing the custom domain being managed through your NGINX reverse proxy setup. In your NGINX configuration, there is a commented out line # proxy_set_header Host $host; under the first location block. Uncommenting this line might help in ensuring that the Host header carries the custom domain, which in turn might influence Shopify's redirection logic. proxy_set_header Host $host; The configuration file could be /etc/nginx/nginx.conf, or the output of nginx -V 2>&1 | grep -o '\--conf-path=[^ ]*' | cut -d= -f2 give an error like "421 Misdirected Request - CloudFlare" and I don't find a way to handle this error. It is more likely throwing an error because, I am doing proxy_pass to stagingstore.myshopify.com and probably related SSL verification issue from my main domain to their internal domain, I guess. When you change the Host header to your custom domain, Cloudflare might not recognize the request as legitimate, hence the error. Check if there is an option within Cloudflare to whitelist your custom domain or IP, which might help in resolving the "Misdirected Request" error. And check the SSL certificates are correctly configured for your custom domain and for the proxy_pass to stagingstore.myshopify.com. (Get the SSL certificates for your custom domain from a reputable Certificate Authority (CA). If you are using Cloudflare, they provide SSL certificates as part of their service) Also, look into Cloudflare settings to see if there is any configuration that can be tweaked to allow your setup to work as intended. That might include settings related to SSL, domain verification, or redirection. The other approach would be to handle the redirection explicitly in your NGINX configuration, by capturing the redirection response and rewriting the URL to replace the 'myshopify' domain with your custom domain before forwarding it to the client. You would typically use the proxy_redirect directive. This directive allows you to modify the Location and Refresh header fields in the response from the proxied server. But Shopify's behavior may not be fully compatible with this kind of redirection handling. You can test it out. But: It is not sending any redirect response to NGINX and issue related to the proxy_set_header, I cannot do anything as I believe it is throwing by Shopify CloudFlare it self as I am doing proxy_pass to the myshopify.com. That means the redirection response from Shopify does not reach the NGINX proxy server at all. Instead, the redirection seems to be handled internally within Shopify's infrastructure, possibly by CloudFlare, and the NGINX server is bypassed entirely. Client Browser NGINX Proxy Server Shopify Server | | | | 1. Request | | |---------------------->| | | | 2. Proxy Request | | |------------------------>| | | | 3. Process Request | | | and Issue Redirect | | | to Shopify Subdomain | | | | | | | 4. Redirect Handled | | | Internally by | | | Shopify/CloudFlare | | |-----------------------X | | | | | 5. Request to | | | Shopify Subdomain | | |-----------------------X | | | | | | | | 6. Response from | | | Shopify Subdomain | | |<----------------------X | The client browser initiates a request to the NGINX Proxy Server. The NGINX Proxy Server forwards the request to the Shopify Server. The Shopify Server processes the request and issues a redirect response to its internal subdomain (e.g., stagingstore.myshopify.com). The redirect is handled internally by Shopify/CloudFlare, and the NGINX Proxy Server is bypassed entirely (indicated by "X"). The client browser makes a new request directly to the Shopify Subdomain, bypassing the NGINX Proxy Server (indicated by "X"). The Shopify Subdomain processes the request and sends the response directly back to the client browser, bypassing the NGINX Proxy Server (indicated by "X"). The NGINX Proxy Server loses control of the request as soon as the redirect is issued by Shopify. Since the redirect is handled internally by Shopify/CloudFlare and does not pass back through the NGINX Proxy Server, the proxy server has no opportunity to intercept, inspect, or modify the redirect response. Any configurations or workarounds implemented on the NGINX Proxy Server, such as handling 421 errors or altering SSL handling, would not have an effect on this redirect behavior.

December 30, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.