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/ )
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.
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.
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.
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 :
Besides *
is too permissive and would defeat use of credentials. So set http://localhost:3000
or http://localhost:8000
as the allow origin header.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With