1 reply

Access to fetch has been blocked by CORS policy

I have read the documentation and checked the messages here on CORS but I am still missing something. Please help!

I am trying to fetch product and store information from a Shopify storefront.

I was able to inject a script there (confirmed and the function is available) but when trying to send the data from the storefront back to Gadget's backend I get the error:
"Access to fetch at 'https://my-app.gadget.app/trackProductView' from origin 'https://girls-who-web-test-store.myshopify.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

This is my routes/+scope.js:

export default async function (server) {
  await server.register(cors, {
    origin: true,
  });
}

export default async function (server) {
  await server.register(cors, {
    origin: true,
  });
}

and this is my (very simple for troubleshooting) routes/POST-info.js:

const route = async ({ request, reply, api, logger, connections }) => {
    logger.info("=== Received request ===");
}
export default route;

const route = async ({ request, reply, api, logger, connections }) => {
    logger.info("=== Received request ===");
}
export default route;

and my script is doing:

fetch("https://my-app.gadget.app/info", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ shopId, productId }),
  })

fetch("https://my-app.gadget.app/info", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ shopId, productId }),
  })

But I am getting nothing printed in Gadget's logger, which tells me that the request is not going through. What am I missing?

Thank you in advance!

Access to fetch has been blocked by CORS policy

export default async function (server) {
  await server.register(cors, {
    origin: true,
  });
}

export default async function (server) {
  await server.register(cors, {
    origin: true,
  });
}

and this is my (very simple for troubleshooting) routes/POST-info.js:

const route = async ({ request, reply, api, logger, connections }) => {
    logger.info("=== Received request ===");
}
export default route;

const route = async ({ request, reply, api, logger, connections }) => {
    logger.info("=== Received request ===");
}
export default route;

and my script is doing:

fetch("https://my-app.gadget.app/info", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ shopId, productId }),
  })

fetch("https://my-app.gadget.app/info", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ shopId, productId }),
  })

But I am getting nothing printed in Gadget's logger, which tells me that the request is not going through. What am I missing?

Thank you in advance!

Access to fetch has been blocked by CORS policy

Similar Threads

Access to fetch has been blocked by CORS policy

Similar Threads

Similar Threads

Similar Threads