CORS Issue In Checkout Extension

[Kit_3]

Hi Developers,

I hope this message finds you well.

I have been trying to fix CORS issue in Checkout extension

I have been developing, simple Shopify app via Remix.JS, I have set up admin and everything but i am really struggling here to send backend GraphQL data to Checkout extension as i am getting CORS issue.

I would really appreciate your help.

Below is my api.get-user.tsx:

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

export const loader = async ({ request }) => {
    // Handle preflight OPTIONS request
    if (request.method === "OPTIONS") {
      return cors(request, json(null, { status: 204 }));
    }
  
    // Your data fetching logic here
    const { admin } = await authenticate.public.checkout(request);
  
    // Fetch bypass products metaobject
    const checkEntryResponse = await admin.graphql(
      `#graphql
        query {
          metaobjects(type: "bypass_products", first: 1) {
            edges {
              node {
                fields {
                  key
                  value
                }
              }
            }
          }
        }
      `
    );
    const checkEntryData = await checkEntryResponse.json();
  
    // Create a JSON response
    const response = json(checkEntryData);

    // Apply CORS headers to the response
    return cors(response);
  };

And below is my checkout extension code in Checkout.tsx:

useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://supporting-advise-lending-witch.trycloudflare.com/api/get-user", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const data = await response.json();
        console.log("Backend response:", data);
        setUserData(data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    }

    fetchData();
  }, []);

Attached below is the issue i am getting:

Many thanks

[hardik355]

Hello @Kit_3
Hope you are doing great!
I’ve also faced the same issue in Rails, but, rails provide a gem, so I’ve resolved the issue.
but you can pass in the header below the code. May this one resolve the error. Please check out this link.

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers': '*',

[Kit_3]

Thank you for your information but it is still not working.