I've been trying to tackle this problem for a few days. Setting cookies on CORS requests. I've seen conflicting articles and answers, some saying that as long as the XHR request has withCredentials set to true, and the server sends the appropriate headers, the browser should respect the Set-Cookie header. However, in my testing this has not been the case.
Example Code:
index.js (Node.js Server)
const http = require('http');
const fs = require('fs');
// Pretty colors
const colors = {
purple: '33[95m',
orange: '33[93m',
blue: '33[97m',
underline: '33[4m',
bold: '33[1m',
reset: '33[0m'
}
const server = http.createServer(function (req, res) {
//Console logs to verify what's getting hit.
console.log(colors.purple + colors.underline + 'Hit it!' + colors.reset);
console.log(colors.orange + colors.bold + 'url:' + colors.reset, req.url);
if (//cookie/.test(req.url)) {
console.log(colors.blue + 'We need to cook(ie) Jesse
' + colors.reset);
// Generate a random string in a rather convoluted way.
var randomStr = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(36) +
Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(36) +
Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(36);
randomStr = new Buffer(randomStr.toString(), 'binary').toString('base64');
// All .dev domains pointed to localhost via dnsmasq, though a hosts file
// Update should also do the trick.
res.writeHead(200, {
'Set-Cookie': 'ajaxTestCookie=cookie' + randomStr + '; Domain=.example.dev; HttpOnly',
'Access-Control-Allow-Origin': 'http://example.dev:3999',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Methods': 'GET, POST',
'Access-Control-Allow-Headers': 'Content-Type, Set-Cookie, *'
});
return res.end('OK!');
}
console.log(colors.blue + 'We're having fun at the HTML!
' + colors.reset);
// Send out html file.
fs.readFile('./cookies.html', function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Failure to launch!');
}
res.end(data.toString());
});
});
server.listen(3999);
cookies.html
<html>
<head>
<title>Cookie Test</title>
</head>
<body>
<button class="getCookie">Get Cookies!</button>
<script>
(function() {
document.querySelector(".getCookie").addEventListener("click", function(e) {
console.log("test");
var req = new XMLHttpRequest();
req.open("GET", "http://localhost:3999/cookie", true);
req.onload = function() {
console.log(req.responseText);
};
req.withCredentials = true;
req.send();
});
}());
</script>
</body>
</html>
I've tried testing this on both Firefox Developer Edition and Chrome, and the cookies will not set unless the page is accessed directly.
Is there anything I'm missing to get cookies working on CORS requests?
See Question&Answers more detail:os
