Fetch method in theme app extension returns HTML instead JSON

Dzonotonas · ‎10-30-2022

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.

SathishTS · ‎11-01-2022

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

Shopify Partner | Shopify Developer

Dzonotonas · ‎11-06-2022

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)

GuillermoGarcia · ‎01-05-2023

Hello! I have the same problem. It's been days looking for a solution but I sill have no way to solve it 😞
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!

Dzonotonas · ‎01-06-2023

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-r...

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

GuillermoGarcia · ‎01-08-2023

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.

Dzonotonas · ‎02-17-2023

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?

<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="/@vite/client"></script>
<script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

<meta charset="UTF-8" />

<!-- Ensures that the UI is properly scaled in the Shopify Mobile app -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<script type="module" src="/index.html?html-proxy&index=0.js"></script>
</head>
<body>
<div id="app"><!--index.jsx injects App.jsx here--></div>
<script type="module" src="/index.jsx"></script>
</body>
</html>

Dzonotonas · ‎02-18-2023

Or the real problem is with my proxy setup 🤔

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

Pallvi · ‎03-19-2024

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

Fetch method in theme app extension returns HTML instead JSON

Fetch method in theme app extension returns HTML instead JSON

Community Blog Articles