Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have a setup involving

Frontend server (Node.js, domain: localhost:3000) <---> Backend (Django, Ajax, domain: localhost:8000)

Browser <-- webapp <-- 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/ ) 
like image 812
ixaxaar Avatar asked Nov 02 '13 15:11

ixaxaar


People also ask

How do you fix credential is not supported if the CORS header Access-Control allow origin is *?

To correct this problem on the client side, ensure that the credentials flag's value is false when issuing your CORS request. If the request is being issued using XMLHttpRequest , make sure you're not setting withCredentials to true . If using Server-sent events, make sure EventSource.

Is wildcard character allowed in Access-Control allow Origin response header?

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.

Which must be true when the request's credentials mode is include?

credentials ) is include . When a request's credentials mode ( Request. credentials ) is include , browsers will only expose the response to the frontend JavaScript code if the Access-Control-Allow-Credentials value is true . Credentials are cookies, authorization headers, or TLS client certificates.


1 Answers

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 :

  1. Access-Control-Allow-Origin wildcard subdomains, ports and protocols
  2. 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.

like image 99
user568109 Avatar answered Oct 02 '22 02:10

user568109