Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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)