Shopify代理URL不起作用，但没有解决

发布于 2025-02-03 06:04:53 字数 1850 浏览 3 评论 0原文

我的Shopify应用程序代理信息：

Subpath prefix: apps

Subpath: rma

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

如果我直接使用 https：//www.example 。

但是，在我的React函数中，查询“/apps/rma”返回的返回，

<!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>

我的代理URL或路径有问题吗？我的文件夹结构是

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

index.aspx是默认文档。

我的代码：

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>;

原文

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>;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

没有伤那来痛 2025-02-10 06:04:53

我只是使用Shopify代理绕过，并在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);
});

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);
});

回复收藏 0 原文

美人骨 2025-02-10 06:04:53

我今天也一直在研究类似的问题。几乎我的确切搜索短语Shopify代理URL无法正常工作，但无需工作。这不是解决您问题的答案，但可能会帮助您，也许其他人可能会觉得这有用。我认为这是URL分辨率，而不是您的React代码。

我的骨架是用shopify-cli 构建的： shopify create create app node。

加载https：// {shop} .myshopify.com/{proxy_prefix}/{proxy_path}/{剩余path}，我在浏览器开发人员窗口中看到了什么。根。 src =“/src/entrc/entry-client.jsx”等。。我的解决方案是将root替换为服务器文件server/index.js，。以下为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);
    });

对于开发服务器（！isprod e节），需要进行更多替换：

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

然后允许字符串替换vite.Createserver实例需要具有MiddleWareMode：“ SSR”（服务器端渲染），这意味着未注入react-ref-refresh代码。因此，我将其包含

        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>
        `);

在最终注释中 - 我仍在尝试弄清楚如何使套接字__ vite_ping转到我的host。

祝你好运。 ngāmihinui。

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.

回复收藏 0 原文

~没有更多了~