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?