For discussing the development and usage of Checkout UI extensions, post-purchase extensions, web pixels, Customer Accounts UI extensions, and POS UI extensions
Hi, we're developing an extension which needs to communicate with the app backend in order to process some data and send an external request from there.
The extension triggers the following request:
const fillProductResponse = await fetch(`/api/fillProducts`, {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
shopifyProductsId: [shopifyProductId],
dest: userDest
})
});
that gets handled app-side (Express.js):
app.post("/api/fillProducts", async (req, res) => {
const result = await fillProducts(req.body.shopifyProductsId, req.body.dest);
if (result) res.status(200).send(JSON.stringify(result));
else res.status(500).send("fillProduct error (see app console)");
});
It worked correctly for some time, but now it started triggering this error:
Access to fetch at 'https://APP_URL/api/fillProducts' from origin 'https://extensions.shopifycdn.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
We tried adding a CORS configuration (with an OPTIONS endpoint before the POST one) but it didn't work:
const corsOptions = {
origin: "https://extensions.shopifycdn.com",
optionsSuccessStatus: 204, // Tried with 200 too
methods: ["POST", "OPTIONS"]
}
app.options("/api/fillProducts", cors(corsOptions));
app.post("/api/fillProducts", cors(corsOptions), async (req, res) => {
...
We also tried with
app.use(cors(corsOptions));
before the endpoint but without success.
What could be causing this error?