Configure CORS/xmlhttprequest to allow cross site access to username/password protected data

问题

I have 2 websites. I am looking to allow a webpage from one website to access data on from other website and display it. For clarity I will refer to the the website accessing the the data as the client website (myclientsite.com), and the website that contains the data as the server website (myserversite.com). The server site is username/password protected. The code on the client site is able to successfully log into the server site, but subsequent attempts to access the needed data result in this error:

XMLHttpRequest cannot load https://myserversite.com/mydata. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'https://myclientsite.com' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

The server website is implemented with Node.js/Express. The access to data on server website is protected by passport using the username/password strategy. The server website is also running cors to allow for cross site access.

cors is configured using the following options:

var corsOptions = {
   origin: 'https://myclientsite.com',
   methods: 'GET,PUT,POST',
   credentials: true
};

As you can see I am not using a '*' wildcard for the origin, so the result is confusing

The client website is a standard website running nginx/wordpress. The webpage I am using to access the server site contains the following HTML/Javascript:

<div id="jsLoginTarget"></div>
</br>
</br>
<div id="jsDataTarget"></div>
<script src='/scripts/ClientMultiReq.js'></script>
<script>
  var curReq;
  var jsDataTargetDiv = document.getElementById('jsDataTarget');
  var jsLoginTargetDiv = document.getElementById('jsLoginTarget');
  jsDataTargetDiv.innerHTML = 'Loading...';
  jsLoginTargetDiv.innerHTML = 'Logging In...';
  var render = function(data, numReqs){ // Render results from pulling web pages
    jsDataTargetDiv.innerHTML =data;
  }
  var login = function(data, numReqs){ // Render results from pulling web pages
    jsLoginTargetDiv.innerHTML =data;
    webReqs.addReq(render,'MyData','https://myserversite.com/mydata','');
  }
  var webReqs = new cliMultiReq();
  webReqs.addPost(login,'Login','https://myserversite.com/signin','username=myusername&password=mypassword');
</script>

The pertinent methods of of ClienMultReq.js are:

cliMultiReq.prototype.addReq = function (rspFunc, label, url, params) {
  var myReq = this.numReqs++;
  this.rspFunc.push(rspFunc);
  this.rdy.push(false);
  this.data.push([]);
  this.label.push(label);
  this.passFunc.push(passFuncGenerator(myReq,this));
  this.xmlHttpReq.push(new XMLHttpRequest);

  this.xmlHttpReq[myReq].addEventListener('load',this.passFunc[myReq]);
  this.xmlHttpReq[myReq].open('GET',url);
  this.xmlHttpReq[myReq].withCredentials = true;
  this.xmlHttpReq[myReq].send();
};  

cliMultiReq.prototype.addPost = function (rspFunc, label, url, params) {
  var myReq = this.numReqs++;
  this.rspFunc.push(rspFunc);
  this.rdy.push(false);
  this.data.push([]);
  this.label.push(label);
  this.passFunc.push(passFuncGenerator(myReq,this));
  this.xmlHttpReq.push(new XMLHttpRequest);

  this.xmlHttpReq[myReq].addEventListener('load',this.passFunc[myReq]);
  this.xmlHttpReq[myReq].addEventListener('error',this.passFunc[myReq]);
  this.xmlHttpReq[myReq].addEventListener('abort',this.passFunc[myReq]);
  this.xmlHttpReq[myReq].open('POST',url, true);
  this.xmlHttpReq[myReq].withCredentials = true;
  this.xmlHttpReq[myReq].setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  this.xmlHttpReq[myReq].send(params);
};  

I am extremely confused where the issue lies. If I set withCredentials to false to fetch the data, the callback function gets called without error, but server site returns a message saying that the access is unauthenticated.

来源：https://stackoverflow.com/questions/40232527/configure-cors-xmlhttprequest-to-allow-cross-site-access-to-username-password-pr