Issue calling shopify app api from Admin Action UI extension

[sadamkhan297]

Hi kinngh,

I hope you are doing well. I wanted to thank you for the Shopify custom app template that you provided; it has been very helpful for me. I am currently working on the admin-action extension. However, I am encountering a CORS error whenever I make API calls from extension to Shopify custom app api. Could you please assist me with resolving this issue? I would greatly appreciate your help.

Thank you!

[kinngh]

1. When you open an issue, please add in the actual error instead of a vague I have CORS error
2. How are you making the request to your app from the extension? Please add in an actual snippet
3. Here's the actual doc on how to make a call from Admin UI Extension to the app: DOCS

[sadamkhan297]

  //This Variable
  const { baseURL, apiKey } = {
        baseURL: "https://shopify-returns-app.vercel.app",
        apiKey: "xyz",
      };
      
//Api
const shipmentResponse = await fetch(
        `${baseURL}/companies/3a1bf1f1-eabc-410b-a6a7-4be4afb3f635/shipments`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Basic ${apiKey}`,
          },
          body: JSON.stringify({
            companyId: data.selected[0].id,
            reference: referenceNo,
            name,
            tradeId: "ed48ed90-6933-40a4-9789-721981e885a4",
            customer: {
              / customer data /
            },
            street,
            housenumber: houseNumber,
            address1: address,
          }),
          
          //Showing this error

Access to fetch at 'https://5b2d-39-39-222-80.ngrok-free.app/companies/3a1bf1f1-eabc-410b-a6a7-4be4afb3f635/shipments' from origin 'https://extensions.shopifycdn.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.

[kinngh]

1. Why are you making a call to shopifycdn.com or is that a placeholder?
2. Please never expose your API Keys like that
3. Your fetch should be to your own app server, not to Shopify
4. You don't need to add Authorization header to your fetch() since that's already taken care of

I'm very confused what you're trying to achieve here and where/what told you to do this

[sadamkhan297]

Please let me summerize it for you, I am just trying to make an api call to this end point https://shopify-returns-app.vercel.app from inside my extension and I get CORS error, Now I know CORS error is mostly about server but that end point is only giving me trouble If i call it from inside extension. So I believe there will be something I am doing wrong. Please let me know if its still not clear. You can also check how I am making an api call from above.