In the app theme, getting an error when using Remix app proxy.

[Lium-7768]

In the theme's Liquid, there will be a 302 error.

Code:

app/routes/app.proxy.tsx

shopify.app.toml

[app_proxy]
url = "https://dr-seeking-retained-exactly.trycloudflare.com/app/proxy"
prefix = "apps"
subpath = "quick-order-products"

extensions/quick-order-extension/snippets/quick-order-page.liquid

const searchUrl = 'https://xxx.myshopify.com/apps/quick-order-products';
        const response = await fetch(searchUrl, {
          method: 'POST',
          redirect: 'manual',
          headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
          },
        });

        console.log("liquid response --------", response);

"xxx.myshopify.com" is intentionally written incorrectly.

Does anyone know what the issue is or can provide some suggestions for resolving it?

[lizkenyon]

Hi there 👋

app/routes/app.proxy.tsx

This route is first authenticated by the code in your app.tsx file.

`
export const loader = async ({ request }) => {
await authenticate.admin(request);

return json({ apiKey: process.env.SHOPIFY_API_KEY || "" });
};
`
Because this request is failing authentication (because the request is not coming from the admin) the request is redirecting to try to log you in.

You should not be nesting your app proxy request under your /app route. You will probably want to define the route to accept your request like

app/routes/apps.quick-order-products.tsx

[Lium-7768]

Hi @lizkenyon,
Thank you very much for your reply. I have solved it, and the solution matches your suggestion. But I still have one question. In the Remix framework, can I display the header and footer from the store? Similar to this example:

This is my current project structure

[lizkenyon]

Hi there 👋
Glad you were able to figure out the issue.

For general questions about Shopify app development, I would recommend creating a question in the .dev Community. Depending on your use case you may want to look into Theme App extensions, or customer account extensions.