Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
240 views
in Technique[技术] by (71.8m points)

javascript - Setting Cookies with CORS requests

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

What wasn't immediately obvious is that cookies set by the server, at least in CORS requests, and possibly (probably) in all requests are limited to the same domain as the server.

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); // api.example.dev:3999, for example

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();
        // Request succeeds, but cookie will not be set!
        // req.open("GET", "http://localhost:3999/cookie", true);
        /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
        // This line, however, will work, assuming this page is on
        // the same domain, or a subdomain of the same domain. 
        // (For example test.example.dev and api.example.dev)
        // As long as the Access-Control-Allow-Origin Header is
        // properly set to allow the domain.
        req.open("GET", "http://api.example.dev:3999/cookie", true);
        req.onload = function() {
          console.log(req.responseText);
        };
        req.withCredentials = true;
        req.send();
      });
    }());
  </script>
</body>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...