For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
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!
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