Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Checkout UI Extension GET request to App

Checkout UI Extension GET request to App

Sven96
Shopify Partner
5 0 0

Hello, 

I am trying to get a collection into my checkout ui extension. I have multiple problems which I do not get around and do not really find suitable and working answers online. 

 

File: extensions/{extension-name}/src/Checkout.tsx

const fetchData = async () => {

const token = await sessionToken.get();

const response = await fetch(`${process.env.APP_URL}/admin-api`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token,
'Access-Control-Allow-Origin': '*',
}
}).then((response) => {
console.log(response)
}).catch(console.error)
}

I am not able to make a GET request to the admin-api.js file. This is most likely caused by cors. I do not really understand why, since my understanding is that 'Access-Control-Allow-Origin': '*' should fix that problem. 

Error:
Access to fetch at 'https://soundtrack-omissions-outstanding-unwrap.trycloudflare.com/admin-api' from origin 'https://extensions.shopifycdn.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

File: app/routes/admin-api.jsx

 

This is the function which should be able to fetch data with GraphQL. 

 

import { json } from "@remix-run/node";
import {authenticate} from "app/shopify.server";

export async function loader({ request }) {
const { admin } = await authenticate.admin(request);
const response = await admin.graphql(`
#graphql
query {
collections(first: 5) {
edges {
node {
id
title
handle
updatedAt
sortOrder
}
}
}
}
`);

const parsedResponse = await response.json();
console.log(parsedResponse.data);
return json({
products: parsedResponse.data,
});
}


If I open /{store-name}/apps/checkout-validation-extension-2/admin-api in the browser, the console.log displays the collections in the terminal just fine. 
However, if I call the file via the checkout (which is odd since it should not work due to the cors error at all?) the function breaks at "const { admin } ... ". If I add a console.log before that, it will be displayed. Everything after is not executed. 

 

I have api_access in the toml file set to true and "Allow network access.." in the partners dashboard activated aswell.

 

Any help is appreciated since I am not able to figure it out myself.

Thank you! 

 

 

 

 

 

Reply 1 (1)

Liam
Community Manager
3108 344 904

Network requests from checkout extensions can only be made to servers that allow Access-Control-Allow-Origin: *. The documentation for network access from extensions is can be found here here. If you’re trying to integrate a third-party service, you might need to use a different method that doesn’t require modifying the CORS headers. For example, you could use a Shopify app, or you could use server-side code to make requests to the third-party service.

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog