Fetch method in theme app extension returns HTML instead JSON

Shopify Discussion
1

Hi,

In theme app extension file I run JS code, where is fetch method:

(function () {
  async function fetchBars() {
    const response = await fetch("/apps/prapp/bars", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    });

    try {
      const res = await response.json();

      console.log(res);
    } catch (error) {
      console.log(error.message);
    }

    return response;
  }

  fetchBars();
})();

But instead data JSON, I get a HTML:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="ngrok">
    <meta name="description" content="ngrok is the fastest way to put anything on the internet with a single command.">
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link id="style" rel="stylesheet" href="https://cdn.ngrok.com/static/css/error.css">
    <noscript>You are about to visit 735f-146-70-141-22.au.ngrok.io, served by 146.70.141.22. This website is served for free through ngrok.com. You should only visit this website if you trust whoever sent the link to you. (ERR_NGROK_6024)</noscript>
    <script id="script" src="https://cdn.ngrok.com/static/js/error.js" type="text/javascript"></script>
  </head>
  <body id="ngrok">
    <div id="root" data-payload="eyJjZG5CYXNlIjoiaHR0cHM6Ly9jZG4ubmdyb2suY29tLyIsImNvZGUiOiI2MDI0IiwiaG9zdHBvcnQiOiI3MzVmLTE0Ni03MC0xNDEtMjIuYXUubmdyb2suaW8iLCJtZXNzYWdlIjoiWW91IGFyZSBhYm91dCB0byB2aXNpdCA3MzVmLTE0Ni03MC0xNDEtMjIuYXUubmdyb2suaW8sIHNlcnZlZCBieSAxNDYuNzAuMTQxLjIyLiBUaGlzIHdlYnNpdGUgaXMgc2VydmVkIGZvciBmcmVlIHRocm91Z2ggbmdyb2suY29tLiBZb3Ugc2hvdWxkIG9ubHkgdmlzaXQgdGhpcyB3ZWJzaXRlIGlmIHlvdSB0cnVzdCB3aG9ldmVyIHNlbnQgdGhlIGxpbmsgdG8geW91LiIsInNlcnZpbmdJUCI6IjE0Ni43MC4xNDEuMjIiLCJ0aXRsZSI6Ik9LIn0="></div>
  </body>
</html>

I use App proxy: https://prnt.sc/1oNgspv6FLd3

How can I fix it? My expectation is to get JSON data in the theme app extension JS file.

2

Try adding a “/” at the end of the URL like so and let me know -

const response = await fetch("/apps/prapp/bars/", {
      method: "GET",
      ....
}

Best

3

Nope, the same problem:(

In browser inspect → network I see this:

You are about to visit cba3-87-101-95-158.eu.ngrok.io, served by 87.101.95.158. This website is served for free through ngrok.com. You should only visit this website if you trust whoever sent the link to you. (ERR_NGROK_6024)

Dzonotonas_0-1667739466662.png
Dzonotonas_0-1667739466662.png1082×938 145 KB

4

Hello! I have the same problem. It’s been days looking for a solution but I sill have no way to solve it :disappointed_face:
Did you find a solution? I would appreciate if you could tell me how you could finally get the json response. Many thanks in advance!

5

No, I don’t have a solution:(

Everything what I have is this theme-extension example in github: https://github.com/Shopify/product-reviews-sample-app/blob/main/theme-app-extension/assets/product-reviews-form.js

but not understand how does it work there. I guess I need to set up the correct middleware to authenticate the user.

6

Hi! I think I have a solution.

Add ‘ngrok-skip-browser-warning’: ‘true’ to your request head. For example:

headers: {
  'Content-Type': 'application/json',
  'ngrok-skip-browser-warning': 'true'
}

It seems that ngrok adds an interstitial page for free accounts to avoid attacks when it receives a request from a browser. With that property in the header we can avoid receiving this page as a response (https://ngrok.com/abuse).

It solves the problem for me. I hope it helps.

7

I’m still getting an error, but this time another one. Could you share your theme app extension JS file, where you call API? How does it look?
8

Or the real problem is with my proxy setup :thinking:

Dzonotonas_2-1676722105619.png
Dzonotonas_2-1676722105619.png1920×614 86.4 KB

For Proxy URL I use the same ngrok URL as here:

Dzonotonas_1-1676722081679.png
Dzonotonas_1-1676722081679.png1962×890 148 KB

9

yeah i had the same issue and after using the provided content in header, i solved this issue
thankyou