Shopify proxy url not working but unproxied is working

user_5786478 0
Viewed 381

My shopify app proxy information:

Subpath prefix: apps

Subpath: rma

Host: https://www.example.com/shopdevc/shopifyAPI/

If I query the host directly using https://www.example.com/shopdevc/shopifyAPI/apps/rma, it works great.

But, in my React function, querying "/apps/rma" returns

<!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" /> </head> <body> <div id="app"><!--app-html--></div> <script type="module" src="/src/entry-client.jsx"></script> </body> </html>

Is there something wrong with my proxy url or path? My folder structure is

"c:\wwwroot\shopDevC\shopifyAPI\apps\rma\index.aspx"

where index.aspx is the default document.

My code:

function delayed_render(async_fun, deps=[]) {
    const [output, setOutput] = useState();
    useEffect(async () => setOutput(await async_fun()), deps);
    return (output === undefined) ? null : output;
}


function TestAPI() {
    return delayed_render(async () => {
        // const resp = await fetch(`https://www.example.com/shopdevc/shopifyAPI/apps/rma`);    // this works fine
        const resp = await fetch(`/apps/rma`);   //this does not work even though our proxy is set to https://www.example.com/shopdevc/shopifyAPI
        const data = await resp.text();
        return <div>
            <h1> Fetch data from an api in react: {data} </h1>
        </div>;
shopify-app reactjs node.js proxy
2 Answers

I too have been working on a similar problem today. Almost my exact search phrase Shopify proxy url not working but unproxied is working. This is not an answer to your problem but may help you and perhaps others may find this useful. It's the url resolution I think, not your react code.

My skeleton was built with the shopify-cli: shopify create app node.

What I saw in my browser developer window when loading https://{shop}.myshopify.com/{proxy_prefix}/{proxy_path}/{rest-of-path} was that assets were requested to the root. src="/src/entry-client.jsx" etc. Which was trying to load https://{shop}.myshopify.com/src/entry-client. My solution was to replace the root with the full url of my host in the server file server/index.js, . The following works for the compiled files in dist (isProd === true):

app.use("/*", (req, res, next) => {                                                          
      let host = "";
      let contentType = "text/html";
      if (Object.keys(req.headers).includes("x-forwarded-for")) {
        host = process.env.HOST; // where I actually am
        contentType = "application/liquid"; // to use shop theme wrapper
      };
      let template = fs.readFileSync(
        path.resolve(root, '/dist/client/index.html'),
        'utf-8'
      );
      template = template.replace("/assets", `${host}/assets`); // correct url
      res
        .status(200)
        .set("Content-Type", contentType)
        .send(template);
    });

For the development server (the !isProd section) more substitutions are required:

        for (const part of ["/@", "/src"]) {
          template = template.replace(part, `${host}${part}`)                                                                                                          
        };

And then to allow the string substitutions the vite.createServer instance needs to have middlewareMode: "ssr" (Server-Side Rendering) which meant that the react-refresh code was not injected. So I included this:

        template = template.replace("<!-- react-refresh -->", `
    <script type="module">
    import RefreshRuntime from "${host}/@react-refresh"
    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {}
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
    </script>
        `);

On a final note - I'm still trying to figure out how to make the socket __vite_ping go to my HOST.

Good luck. Ngā mihi nui.

user_43677130

I simply bypassed using the shopify proxy and rolled my own in index.js:

    app.use(`/a/prx/*`, async function(req, res) {
    const path = req.originalUrl.split(`/`).splice(-1).toString(); 
    var options = {
        method: req.method,
        headers: {
            'User-Agent': req.headers[`user-agent`],
            "X-User-Agent": req.headers[`user-agent`],
            "Shopify-API-Key": process.env.SHOPIFY_API_KEY,
            "Shopify-API-Secret": process.env.SHOPIFY_API_SECRET
        }
    };
    const response = await fetch(`${process.env.KP_SHOPIFY_API}${path}/`, options);
    const data = await response.text();
    res.send(data);
});
user_57864780
Related