Blank response when fetching data from server via app proxy.

Blank response when fetching data from server via app proxy.

angevin-capital
Shopify Partner
2 0 0

I'm simply trying to fetch some test html data from my app server and display it on the shopify web page but I just get an unpopulated response. I've tried applying CORS settings I think are relevant in the server response to no avail.

 

Client code:

<head>
</head>
<body>
<button onclick="onPageLoad()">Testtt.</button>
</body>

        <script>
                function onPageLoad() {
                   return new Promise((resolve, reject)=> {
                        fetch('https://test.myshopify.com/apps/proxy_app',{
                                method: 'POST',
                                redirect: 'manual',
                                headers: {
                                        'Content-Type':'text/html',
                                },
                        })
                        .then((response) => {
                                console.log(response);
                                return response.text(); // Return the promise
                        })
                        .then((htmlContent) => {
                                console.log(htmlContent); // Log the HTML content
                                console.log("test_2");
                                resolve(htmlContent);
                                console.log("test_3");
                        })
                        .catch((error) => {
                                console.error('Error:', error); // Log any errors
                        });
                  })
                }



                // Call the onPageLoad function when the page finishes loading

                window.onload = onPageLoad;
        </script>

Server code:

import {ActionFunction} from '@remix-run/node'
import {authenticate} from '~/shopify.server'
import {Page} from '@shopify/polaris'

export const action: ActionFunction = async ({request}) => {
        console.log("------------hit app proxy------------")

        const{session} = await authenticate.public.appProxy(request)
        if(session){
        //console.log(session)
        }

        const htmlButton = `<button onclick="onClickButton()">Click me</button>`;
        console.log(htmlButton)
        return new Response(htmlButton, {
            headers: {
                'Content-Type': 'text/html',
                'Access-Control-Allow-Origin': '*', // Allow requests from any origin
                'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', // Allow specific HTTP met                
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'}, }); } const Proxy = () => { return <Page>Proxy</Page> } export default Proxy;

Browser logs:

angevincapital_0-1710539471925.png

 

Reply 1 (1)

DodoDev
Shopify Partner
4 0 0

Same here! Did you find something?