"blocked by CORS policy" — what it means and how to fix it

What it means

Your page on one origin asked for a resource on another, and the server did not say that your origin is allowed to read the response. The browser blocked it. Note the server did receive the request — CORS controls whether your JavaScript may read the reply, not whether the request happened.

Why it happens in AI-built apps

• Frontend and API are on different domains or ports, and the API has no CORS configuration at all.
• The request became a preflight (custom headers or a JSON content type) and the server does not answer OPTIONS.
• The origin is listed with a trailing slash or a protocol mismatch — matching is exact.
• Credentials are being sent, which forbids a wildcard origin; the server must name the origin explicitly.

Is this error actually a problem?

Check it yourself

curl -sI -X OPTIONS https://YOUR-API.com/endpoint \
  -H "Origin: https://example.com" \
  -H "Access-Control-Request-Method: POST" | grep -i access-control

Fix it

I am getting "blocked by CORS policy" calling my own API.

1. Show me the current CORS configuration and explain precisely which
   check is failing — origin, method, headers, or the preflight.
2. Fix it with an explicit allow-list of my own origins. Do not use "*"
   and do not reflect the incoming Origin header back.
3. Make sure OPTIONS preflight requests are answered with the right
   Access-Control-Allow-Methods and Access-Control-Allow-Headers.
4. If credentials are involved, set Access-Control-Allow-Credentials: true
   with a named origin, never a wildcard — the two are incompatible.
5. Add Vary: Origin so caches do not serve one origin's response to
   another.

Show me the final configuration and list exactly which origins can now
read responses.