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.

I hope if anyone has the same problem they will come across my solution and not waste the same amount of time, it turned out to be much simpler - because of cloudflare cors settings the policy was overwritten and you can't do a cookie transfer.

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.