Question

我有2个网站。我希望允许一个网站的网页访问其他网站上的数据并显示它。为清楚起见，我将参考访问数据的网站作为客户网站（myclientsite.com），以及包含数据的网站作为服务器网站（myserversite.com）。服务器站点受用户名/密码保护。客户端站点上的代码能够成功登录到服务器站点，但后续尝试访问所需数据会导致此错误：

XMLHttpRequest无法加载https://myserversite.com/mydata。通配符＆＃39; *＆＃39;不能用于“访问控制 - 允许 - 来源”＃39;凭证标志为true时的标头。起源＆＃39; https://myclientsite.com＆＃39;因此不允许访问。 XMLHttpRequest的凭据模式由withCredentials属性控制。

服务器网站使用Node.js / Express实现。服务器网站上的数据访问受使用用户名/密码策略的护照保护。服务器网站也运行cors以允许跨站点访问。

使用以下选项配置cors：

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

正如您所看到的，我没有使用＆＃39; *＆＃39;原点的通配符，所以结果令人困惑

客户端网站是运行nginx / wordpress的标准网站。我用来访问服务器站点的网页包含以下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>

ClienMultReq.js的相关方法是：

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);
};

问题所在，我感到非常困惑。如果我将withCredentials设置为false以获取数据，则会调用回调函数而不会出现错误，但服务器站点会返回一条消息，指出该访问未经身份验证。

配置CORS / xmlhttprequest以允许跨站点访问受用户名/密码保护的数据

0 个答案: