Blank response when fetching data from server via app proxy.
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:
