CORS Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true

Question

I have a setup involving  Frontend server  Node js  domain  localhost 3000   lt ---  Backend  Django  Ajax  domain  localhost 8000   Browser  lt -- webapp  lt -- Node js  Serve the app   Browser  webapp  --  Ajax --  Django Serve ajax POST requests   Now  my problem here is with CORS setup which the webapp uses to make Ajax calls to the backend server  In chrome  I keep getting     Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true    doesn t work on firefox either   My Node js setup is   var allowCrossDomain   function req  res  next        res header  Access-Control-Allow-Origin    http   localhost 8000         res header  Access-Control-Allow-Credentials   true       res header  Access-Control-Allow-Methods    GET PUT POST DELETE        res header  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept        next         And in Django I m using this middleware along with this  The webapp makes requests as such     ajax       type   POST       url   http   localhost 8000 blah       data          xhrFields            withCredentials  true            crossDomain  true      dataType   json       success  successHandler       So  the request headers that the webapp sends looks like   Access-Control-Allow-Credentials  true Access-Control-Allow-Headers   Origin  X-Requested-With  Content-Type  Accept  Access-Control-Allow-Methods   GET PUT POST DELETE  Content-Type  application json  Accept      Accept-Encoding  gzip deflate sdch Accept-Language  en-US en q 0 8 Cookie  csrftoken      sessionid         And here s the response header   Access-Control-Allow-Headers  Content-Type   Access-Control-Allow-Credentials  true Access-Control-Allow-Origin    Access-Control-Allow-Methods  POST GET OPTIONS PUT DELETE Content-Type  application json   Where am I going wrong    Edit 1  I ve been using chrome --disable-web-security  but now want things to actually work   Edit 2  Answer   So  solution for me django-cors-headers config   CORS ORIGIN ALLOW ALL   False CORS ALLOW CREDENTIALS   True CORS ORIGIN WHITELIST          http   localhost 3000    Here was the problem indeed and it has to be http   localhost 3000  not http   localhost 3000

User · Answer

This works for me in development but I can't advise that in production, it's just a different way of getting the job done that hasn't been mentioned yet but probably not the best. Anyway here goes:

You can get the origin from the request, then use that in the response header. Here's how it looks in express:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.header('origin') );
  next();
});

I don't know what that would look like with your python setup but that should be easy to translate.

User · Answer

If you are using CORS middleware and you want to send withCredential boolean true  you can configure CORS like this   var cors   require  cors        app use cors  credentials  true  origin   http   localhost 3000

User · Answer

If you want to allow all origins and keep credentials true  this worked for me   app use cors     origin  function origin  callback       return callback null  true          optionsSuccessStatus  200    credentials  true

User · Answer

try it   const cors   require  cors    const corsOptions         origin   http   localhost 4200       credentials  true     app use cors corsOptions

User · Answer

Expanding on  Renaud idea  cors now provides a very easy way of doing this  From cors official documentation found here   quot  origin  Configures the Access-Control-Allow-Origin CORS header  Possible values  Boolean - set origin to true to reflect the request origin  as defined by req header  Origin    or set it to false to disable CORS   quot  Hence we simply do the following  const app   express    const corsConfig         credentials  true      origin  true     app use cors corsConfig     Lastly I think it is worth mentioning that there are use cases where we would want to allow cross origin requests from anyone  for example  when building a public REST API  NOTE  I would have liked to leave this as a comment on his answer  but unfortunately I don t have the reputation points

User · Answer

Edit  The previously recomended add-on is not available any longer  you may try this other one    For development purposes in Chrome  installing this add on will get rid of that specific error   Access to XMLHttpRequest at  http   192 168 1 42 8080 sockjs-node info t 1546163388687   from origin  http   localhost 8080  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   The credentials mode of requests  initiated by the XMLHttpRequest is controlled by the withCredentials attribute    After installing  make sure you add your url pattern to the Intercepted URLs by clicking on the AddOn s  CORS  green or red  icon and filling the appropriate textbox  An example URL pattern to add here that will work with http   localhost 8080 would be

User · Answer

This is a part of security  you cannot do that  If you want to allow credentials then your Access-Control-Allow-Origin must not use    You will have to specify the exact protocol   domain   port  For reference see these questions     Access-Control-Allow-Origin wildcard subdomains  ports and protocols Cross Origin Resource Sharing with Credentials   Besides   is too permissive and would defeat use of credentials  So set http   localhost 3000 or http   localhost 8000 as the allow origin header

User · Answer

Had this problem with angular  using an auth interceptor to edit the header  before the request gets executed  We used an api-token for authentification  so i had credentials enabled  now  it seems it is not neccessary allowed anymore  Injectable   export class AuthInterceptor implements HttpInterceptor     intercept req  HttpRequest lt any gt   next  HttpHandler   Observable lt HttpEvent lt any gt  gt        req   req clone           withCredentials  true    not needed anymore       setHeaders             Content-Type     application json            API-TOKEN     xxx                            return next handle req        Besides that  there is no side effects right now

User · Answer

If you are using express you can use the cors package to allow CORS like so instead of writing your middleware   var express   require  express     cors   require  cors     app   express     app use cors      app get function req res      res send  hello

[ajax] CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true

Examples related to ajax

Examples related to django

Examples related to node.js

Examples related to cors

Examples related to django-cors-headers