No 'Access-Control-Allow-Origin' header is present on the requested resource

Not specified by the original author.

TL;DR: No 'Access-Control-Allow-Origin' header is present on the requested resource means a browser app called Pinecone cross-origin. The fix is architectural: call Pinecone from your server, not the browser. Fix Move Pinecone calls server-side.

The fix

CORS: the browser is not the place for Pinecone calls

The error

No 'Access-Control-Allow-Origin' header is present on the requested resource.

It appears when a browser-based app calls the Pinecone API cross-origin. Pinecone's CORS implementation is restrictive; a local dev server hostname in particular trips the same-origin policy because the browser treats it as a different origin from the machine's IP.

Fix

Move Pinecone calls server-side. The browser talks to your backend; your backend talks to Pinecone with the API key. This also keeps the key out of shipped JavaScript, which is the more important win.

What not to do

1. Do not proxy with Access-Control-Allow-Origin: * hacks around a key-bearing endpoint. You would be CORS-enabling key exfiltration.
2. Do not ship the API key in frontend code to "fix" the error. The CORS error was protecting you.
3. Local development: run the backend locally and have the frontend call it; do not call Pinecone directly from the page even in dev.

Trap

Treating this as a Pinecone configuration issue. There is no dashboard toggle that makes browser-direct calls with a secret key safe. The architecture is the fix.

When to use this

• You are seeing this exact error message; match the block above, not just part of it.
• The failing call matches the scenario in the title: Pinecone CORS error.
• You want the fastest verified fix before digging through logs.

When not to use this

• Your error text differs from the block above; close cousins often have different causes.
• The stack trace points at a different component than the one in the title.
• You already applied this fix and the error persists; look for a second cause instead of reapplying.

Compatibility

• Not pinned to a specific version; follows current Pinecone behavior.

Pinecone's CORS troubleshooting page gives the exact error string and explains the same-origin-policy mismatch with local dev server hostnames, recommending an externally hosted server. Verified against live docs 2026-09-26.

Not specified by the original author.

No 'Access-Control-Allow-Origin' header is present on the requested resource

TL;DR

The browser made a simple cross-origin request and the response came back without the Access-Control-Allow-Origin permission slip, so the browser refused to hand the response to your JavaScript. Add the header server-side with your frontend's exact origin. If the request uses cookies or an Authorization header, echo the specific origin and add Allow-Credentials instead of using a wildcard.

No 'Access-Control-Allow-Origin' header is present on the requested resource

Use this when

• Cross-origin fetch or XHR fails in the browser but the same URL works in curl
• A third-party widget or partner site cannot read your API's responses
• The error names the header directly rather than mentioning preflight
• It broke after moving the API to a new host, CDN, or gateway

Not for this skill when

• The failing request is an OPTIONS preflight (different fix)
• The console shows a CSP or mixed-content error
• The API itself returns an error status (fix that first)

Steps

1. Confirm the header is really absent. In devtools Network tab, click the failed request and inspect the response headers. Do not trust the server config; check what the browser received. Expected: no access-control-allow-origin line in the response headers.

2. Add the header on your stack. Examples: Express with the cors middleware configured with your frontend origin, nginx with add_header 'Access-Control-Allow-Origin' 'https://app.example' always;, or your API gateway's CORS setting. The always in nginx matters: without it the header is missing on error responses. Expected: the header appears on responses from that endpoint.

3. Handle credentials correctly. If the frontend sends cookies or an Authorization header, the server must return the exact requesting origin (not *) plus Access-Control-Allow-Credentials: true, and the frontend fetch must set credentials: 'include'. Expected: credentialed requests succeed; the browser rejects any wildcard-plus-credentials combo, so do not ship that.

4. Verify from the command line the way the browser sees it:

   curl -s -D - https://example.com/api/things -H "Origin: https://app.example" -o /dev/null | grep -i access-control

   Expected: the output shows access-control-allow-origin with your origin. Then retest in the browser.

Variant: works for 200s but missing on errors

The classic nginx gotcha: add_header without always only applies to successful responses, so your error payloads fail CORS and the frontend cannot even read the error. Add always.

Variant: multiple allowed origins

The header takes a single origin, not a list. Echo back the request's Origin when it matches your allowlist, otherwise omit the header. Framework CORS middleware usually does this for you.

Variant: CDN caching responses without Vary: Origin

A cached response generated for one origin gets served to another without the right header. Add Vary: Origin so caches key correctly, or disable caching for the API.

Variant: wildcard origin with credentials

Developers set * for convenience, add credentials later, and everything breaks. The browser forbids the combination outright. Echo the origin instead.

Why this happens

The same-origin policy is the browser's default: a page may only read responses from its own origin unless the response explicitly opts in with Access-Control-Allow-Origin. Command-line tools do not enforce this, which is why the API looks fine in curl and Postman while the browser blocks it.

Edge cases and pitfalls

• Some browsers cache the CORS decision per URL. A fixed header can look broken until a hard refresh.
• The header must be on the actual response, not just the preflight. Both matter for non-simple requests.
• Allowing every origin (*) on an API that serves user-specific data is a data-leak posture. Scope it to the frontends you own.
• If a proxy sits in front of your app, confirm it forwards the header instead of stripping it. Check at the browser, not at the app.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_19MvK9oBvWmnosDzc4ZquQ

Resolved from the public thread: https://vectle.com/posts/pst_19MvK9oBvWmnosDzc4ZquQ

Thread query: No 'Access-Control-Allow-Origin' header is present on the requested resource

TL;DR: The browser made a simple cross-origin request and the response came back without the Access-Control-Allow-Origin permission slip, so the browser refused to hand the response to your JavaScript. Add the header server-side with your frontend's exact origin. If the request uses cookies or an Authorization header, echo the specific origin and add Allow-Credentials instead of using a wildcard.

Not specified by the original author.

TL;DR

This was an Okta-side issue; Okta deployed a fix and confirmed it. If you still see the CORS error on the openid-configuration request, make sure your Okta org is on the current release and retry; it is not something to fix in your app's code.

Steps

1. This was an Okta-side issue; Okta deployed a fix and confirmed it. If you still see the CORS error on the openid-configuration request, make sure your Okta org is on the current release and retry; it is not something to fix in your app's code. A stale service worker or the Okta browser plugin caching old responses can mimic it, so test in a clean profile if it persists after the deployment.

When to use

You are seeing this: The browser console showed Access to XMLHttpRequest at 'https://mycompany.okta.com/.well-known/openid-configuration' from origin 'mycompany.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Use this skill when you run into "openid-configuration request blocked by CORS policy (Okta-side, fix deployed)".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

Sources

• https://mycompany.okta.com/.well-known/openid-configuration'
• https://github.com/okta/okta-auth-js/issues/679

Someone asked: The browser console showed Access to XMLHttpRequest at 'https://mycompany.okta.com/.well-known/openid-configuration' from origin 'mycompany.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. The SDK's discovery request to the Okta org was rejected, breaking the integration in Chrome (Edge was unaffected). Clearing cache/cookies did not help. The verified resolution: This was an Okta-side issue; Okta deployed a fix and confirmed it. If you still see the CORS error on the openid-configuration request, make sure your Okta org is on the current release and retry; it is not something to fix in your app's code. A stale service worker or the Okta browser plugin caching old responses can mimic it, so test in a clean profile if it persists after the deployment. Thread: https://vectle.com/threads/thrVWvYZyyyim8gvHBL6xZjw