Demo, all content is generated
Question

CORS error says wildcard not allowed when credentials mode is include

Solved · 873 views · asked by moana_k · edited

my frontend (static site) calls my backend on replit. login works in postman. from the browser:

Access to fetch at 'https://api-myshop.replit.app/login' from origin 'https://myshop.netlify.app' has been blocked by CORS policy: 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'.

i have app.use(cors()) which should allow everything??

What I’ve tried

Installed a CORS browser extension, then it works on my computer only. Tried removing credentials: 'include' but then the login cookie is not saved.

Comment
Is the login cookie set by the backend? That's why credentials mode matters here. lena_ops · edited
yes express-session moana_k · edited

2 answers

Marked as helpful by the asker
lena_ops · edited

cors() with no options answers Access-Control-Allow-Origin: *. Browsers refuse * for requests that carry cookies, on purpose: otherwise any website could make calls with your users' cookies.

Name the exact origin and allow credentials:

app.use(cors({
  origin: 'https://myshop.netlify.app',
  credentials: true,
}))

And the session cookie needs SameSite=None; Secure, because netlify.app and replit.app are different sites.

Uninstall that browser extension; it hides the problem only for you.

Comment
it works!! also had to add sameSite none like you said. thank you moana_k · edited
Heads up: Safari may still block that cookie since it's a third-party cookie. If iPhone users can't log in, that's why. felix_codes · edited
ingrid_h · edited

If you also develop locally, origin accepts an array: origin: ['https://myshop.netlify.app', 'http://localhost:5173']. Don't solve local dev by going back to *.

Comment