API working in live Shopify app but failing in development on Order Status Page (UI Extension) – CORS issue?

Extensions
1

Hi devs :waving_hand:

I’m facing a confusing issue with a Shopify Order Status Page UI Extension.

What’s happening

  • My API works perfectly in the live app

  • But in development mode, the same API call fails on the Order Status Page

  • The error I’m getting is a CORS error

Access to fetch at ‘https://my-api-url/api/order-status’
from origin ‘https://extensions.shopifycdn.com’
has been blocked by CORS policy:
No ‘Access-Control-Allow-Origin’ header is present.

If anyone has faced this before or knows the correct Shopify-recommended approach, please share :folded_hands:
Would really help the community.

Thanks! :rocket:

2

You need to modify the backend to add the additional header ‘Access-Control-Allow-Origin’ in response.
if you are using node the below code should solve:
app.use((req, res, next) => {
res.setHeader(
“Access-Control-Allow-Origin”,
“https://extensions.shopifycdn.com”
);
res.setHeader(
“Access-Control-Allow-Methods”,
“GET, POST, OPTIONS”
);
res.setHeader(
“Access-Control-Allow-Headers”,
“Content-Type, Authorization”
);

// Important for preflight
if (req.method === “OPTIONS”) {
return res.sendStatus(204);
}

next();
});

in case you need multiple, you can use

const allowedOrigins = [
“https://extensions.shopifycdn.com”,
“https://yourdomain.com”,
];

const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {
res.setHeader(“Access-Control-Allow-Origin”, origin);
}