GraphQL Fetch CORS error in POS-UI Extension

Retired Boards Appdev Extensions
, ,
1

Hi,

I’ve been trying to develop a new tile for the POS using POS-UI Extension.

But, when trying to get the last 3 orders, I encounter a CORS error.

Here is my fetch request:

const res = await fetch(url, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-Shopify-Access-Token": `${sessionToken}`,
            "Access-Control-Allow-Origin": "*",
            mode: "no-cors"
          },
          body: JSON.stringify({
            query: `
              query {
                orders(first: ${number}, reverse: true) {
                  edges {
                    node {
                      id
                      name
                      createdAt
                    }
                  }
                }
              }
              `,
            variables: {}
          })
        });

And here is the Chrome Inspect error:

Access to fetch at 'https://my-store.myshopify.com/admin/api/2024-04/graphql.json' from origin 'https://cdn.shopify.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

Is there anything I can do ?

Thanks for your help.

2

Have you figured this out yet?

3

I used Remix as a workaround with:

access_token

to authenticate requests and access the GraphQL Admin object.

It’s not as clean as I wanted it to be, nor as convenient, but it works.

4

Would you mind showing me an example? Or did you build a remix app then an extension. Please any information would help, I am stuck on trying to fetch data for product variants. Thank you

5

Actually, inside the same app we have both an extension and a Remix app.

Here is one of the routes that are called with a fetch method from the POS:

export const loader = async ({ request }: LoaderFunctionArgs) => {
    const session = await authenticate.admin(request);
    if (!session || !session.admin) {
      const reqRes = json(
        { message: "Unauthorized" },
        {
          status: 401,
        },
      );
      return await cors(request, reqRes);
    }

    
    const query = `
    {
      your_query
    }
    `;
    const response = await session.admin.graphql(query);
    const data = await response.json();
    // handle the data
};

To bypass the CORS issue, I used:

import { cors } from "remix-utils/cors";

To get the access_token, I used:

const api = useExtensionApi();
const { session } = api;
const { currentSession, getSessionToken } = session;
const { shopDomain } = currentSession;

Using useEffect to retrieve and pass it onto our Remix API route.

Hope it helped