CORS Error: Response to preflight request doesn't pass access control check

Extensions
1

Hello everyone!
I’m developing a Shopify app and facing a CORS error when trying to send a request from the storefront to my server.

Error:

Access to fetch at 'https://multimedia-arg-such-transcript.trycloudflare.com/api/assistant?query=Hello' from origin 'https://getvoicecart.myshopify.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Storefront Request Code:

fetch(`https://multimedia-arg-such-transcript.trycloudflare.com/api/assistant?query=${encodeURIComponent(query)}`, {
  method: 'GET',
  credentials: "include",
})

CORS Headers in api.assistant Response:

return json(
  { response: processedResponse },
  {
    headers: {
      "Set-Cookie": `threadID=${threadID}; Path=/; HttpOnly; Max-Age=86400;`,
      "Access-Control-Allow-Origin": "https://getvoicecart.myshopify.com/",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization, _shopify_y",
    },
  }
);

Question:

Why am I still facing this CORS error, and how can I fix it? Is there something specific to Shopify or Cloudflare that could cause this issue?

Any help or guidance would be greatly appreciated!

Steps I’ve Tried:

  1. Ensured that “Access-Control-Allow-Origin” is set to my Shopify domain (https://getvoicecart.myshopify.com/).
  2. Added “Access-Control-Allow-Credentials”: “true” to allow cookies and credentials.
  3. Checked the request URL, method, and credentials in the fetch call.
  4. Confirmed that the Cloudflare server is reachable.
2

Hi @UsernameNotDefine Have you got solution for this?

3

Hard to tell based off provided information, but my guess would be you should read the docs about app proxies.

1 Like
4

Hi @Curzey, I’m facing a similar issue in my app. After hosting my Shopify app, whenever I try to call the API route endpoint with GET/POST/DELETE requests (e.g., /api/getUser) from the storefront (i.e., theme extension JavaScript file), I encounter a CORS error.

The following error appears in the terminal:

Error: You made an OPTIONS request to “/api/send/otp” but did not provide a loader for route “routes/api.send.otp”, so there is no way to handle the request.
at getInternalRouterError (/app/node_modules/@remix-run/router/router.ts:5513:5)
at loadRouteData (/app/node_modules/@remix-run/router/router.ts:3946:13)
at queryImpl (/app/node_modules/@remix-run/router/router.ts:3742:26)
at Object.queryRoute (/app/node_modules/@remix-run/router/router.ts:3675:24)
at handleResourceRequest (/app/node_modules/@remix-run/server-runtime/dist/server.js:402:40)
at requestHandler (/app/node_modules/@remix-run/server-runtime/dist/server.js:156:24)
at /app/node_modules/@remix-run/express/dist/server.js:41:28
at processTicksAndRejections (node:internal/process/task_queues:95:5)
OPTIONS /api/send/otp 400 - - 2300.261 ms

1 Like
5

Hi, @Vijay_Kumar I hope you were able to solve this problem, sorry for not replying for a long time, yes I have solved the problem

Solution:

The first thing to do is to make sure you have shopify app proxy configured:

[app_proxy]
  url = ‘https://anti-inline-bee-taking.trycloudflare.com’
  subpath = ‘api’
  prefix = ‘apps’

The proxied URL to use in your storefront would be: https://example.myshopify.com/apps/api/nameofscript

The next step, to transfer the user’s cookie from the storefront: The solution to the problem was only to pass the cookie inside the request, if you use the cors policy it won’t work, because cloudflare rewrites it.

1 Like