CORS problem with request from extension to app

CORS problem with request from extension to app

StefanoNava
Shopify Partner
1 0 0

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?

Replies 0 (0)