Hi everyone,
I’m having an issue with my custom reviews feature on my Shopify store. My backend logs reviews and returns JSON data, and I can verify the data is correctly returned when testing with curl. However, when my storefront fetches the reviews, I’m getting an HTML error page from ngrok instead of JSON.
Here are the details:
Backend & Frontend Setup:
-
Backend:
I’m running my backend locally and exposing it using a free ngrok tunnel. The endpoint is:
https://…ngrok-free.app/reviews?productHandle=frantoio-beretta
When I run a curl command with the header Accept: application/json, I get valid JSON data. -
Frontend:
On my Shopify product page, I have a JavaScript fetch call that requests reviews using the same ngrok URL with Accept: application/json. Despite that, the response I receive is HTML. Here’s a snippet of the response details from the Network tab:yaml
Request URL: https://…ngrok-free.app/reviews?productHandle=frantoio-beretta Request Method: GET Status Code: 200 OK Content-Type: text/html
And the response body is:
php-template
... (ngrok error page content) ...
Observations:
- The curl test returns JSON properly, but the storefront fetch (from my Shopify domain) is returning an HTML page.
- The request includes the header Accept: application/json and still results in HTML.
- The issue appears to be related to ngrok’s handling of cross-origin requests or host header mismatches when the request originates from my Shopify domain.
My Question:
Has anyone encountered a similar issue where ngrok is returning an HTML error page instead of JSON when fetching data from a Shopify storefront? Are there workarounds or settings I can adjust in ngrok or my backend to force a JSON response regardless of the request’s origin?
Any insights or suggestions would be greatly appreciated—I’m really stuck here as the reviews are logged in the backend but not showing on my product pages.
Thanks in advance for your help!