Issue calling shopify app api from checkout UI extension

[HridayHegde]

Hi,
I am building a shopify custom app with a checkout UI extension. I have used the cli to get started with the remix template. The checkout UI extension itself is working fine, but now I want to make a call to the admin to retrieve some data, i built an api for this under
app > api.updatesavedcartdata.jsx (ignore the naming)

import { json } from "@remix-run/node";
export async function loader({ request }) {
  return json(
    { data: "HELLO" }
  );
}

Now i am trying to call this api in my checkoutUI extension 

const response = await fetch(
      `https://wise-casey-windows-novel.trycloudflare.com/api/updatesavedcartdata`
    );
    console.log("helo", response);

Where https://wise-casey-windows-novel.trycloudflare.com is the cloudflare link it generates on using `yarn run dev`. When I do this I get a cors origin error on the checkout page where the checkout ui loads the error:

Access to fetch at 'https://wise-casey-windows-novel.trycloudflare.com/api/updatesavedcartdata' from origin 'https://cdn.shopify.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.

 I tried changing and adding cors headers to the api response

export async function loader({ request }: ActionFunctionArgs) {
  return json(
    { data: "HELLO" },
    {
      headers: {
        "Access-Control-Allow-Origin": "https://cdn.shopify.com",
      },
    }
  );
}

But this just removed the error and now sends back the response

Response {type: 'cors', url: 'https://wise-casey-windows-novel.trycloudflare.com/api/updatesavedcartdata', redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: falseheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: ""type: "cors"url: "https://wise-casey-windows-novel.trycloudflare.com/api/updatesavedcartdata"[[Prototype]]: Response

The correct response should be

{"data":"HELLO"}

I have all the permissions set that i would need to do this including network access. And hitting the link in the browser works normally

Any help would be appreciated on implementing this. My final use case is reading the customer's tags or metafields to set a condition. If there are any alternative approaches to this that would be fine as well  (currently by calling the admin graphql with customerid in the api)

Thanks,
Hriday

[Liam]

Hi HridayHegde,

It looks like you're encountering CORS issues due to the different origins of your Shopify app and your API. The error message suggests that the Access-Control-Allow-Origin header is not present in the response from your API.

You might have tried to set this header in your API response, but as the error still persists, you can try the following solutions:

1. Set the Access-Control-Allow-Origin header to *: This will allow requests from any origin. If your API doesn't contain sensitive information and it's okay to be accessed from anywhere, you can try this approach.

export async function loader({ request }: ActionFunctionArgs) {
  return json(
    { data: "HELLO" },
    {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    }
  );
}

2. Include additional CORS headers: Sometimes, you need to include more headers to pass the CORS policy, like Access-Control-Allow-Methods and Access-Control-Allow-Headers.

export async function loader({ request }: ActionFunctionArgs) {
  return json(
    { data: "HELLO" },
    {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods "GET, POST, PUT, DELETE",
        "Access-Control-Allow-Headers": "Content-Type"
      },
    }
  );
}

3. Use a CORS middleware: If you're using express.js or similar, you could use a CORS middleware to handle CORS in your API.

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

4. Use a proxy Another option would be to use a proxy server to bypass CORS. This is often used for development and might not be the best option for production.

Hope this helps!

[muhammadluqman1]

Same problem- Did you find any solution?

[Liam]

Hi Muhammadluqman1,

Did you try the troubleshooting steps listed above? 

[muhammadluqman1]

I did, same error::
Access to fetch at 'https://julian-jury-blame-rental.trycloudflare.com/api/postTransaction' 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 resour

[Faisal235711]

Hello. Did you manage to solve this issue? I'm also facing the same.