相关疑难解决方法(0)

我有一个涉及的设置

前端服务器(Node.js,domain:localhost:3000)<--->后端(Django,Ajax,域:localhost:8000)

浏览器< - webapp < - Node.js(服务应用)

浏览器(webapp) - > Ajax - > Django(服务ajax POST请求)

现在,我的问题在于CORS设置,webapp使用它来向后端服务器进行Ajax调用.在chrome中,我一直在努力

当credentials标志为true时,无法在Access-Control-Allow-Origin中使用通配符.

在Firefox上也不起作用.

我的Node.js设置是:

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

而在Django我使用这个中间件 与此相伴

webapp发出如下请求:

$.ajax({
    type: "POST",
    url: 'http://localhost:8000/blah',
    data: {},
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    dataType: 'json',
    success: successHandler
});

因此,webapp发送的请求标头如下所示:

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: …

我正在编写一个JavaScript客户端以包含在第三方网站上(想想Facebook Like按钮).它需要从需要基本HTTP身份验证的API检索信息.简化的设置如下所示:

第三方网站在其网页上包含以下代码段:

<script 
async="true"
id="web-dev-widget"
data-public-key="pUbl1c_ap1k3y"
src="http://web.dev/widget.js">
</script>

widget.js调用API:

var el = document.getElementById('web-dev-widget'),
    user = 'token',
    pass = el.getAttribute('data-public-key'),
    url = 'https://api.dev/',
    httpRequest = new XMLHttpRequest(),
    handler = function() {
      if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
          console.log(httpRequest.responseText);
        } else {
          console.log('There was a problem with the request.', httpRequest);
        }
      }
    };

httpRequest.open('GET', url, true, user, pass);
httpRequest.onreadystatechange = handler;
httpRequest.withCredentials = true;
httpRequest.send();

API已配置为使用适当的标头进行响应:

Header set Access-Control-Allow-Credentials: true
Header set Access-Control-Allow-Methods: "GET, OPTIONS"
Header …

我有一个有两个https服务器的站点.一个(前端)提供由静态页面组成的UI.另一个(后端)提供微服务.他们俩都碰巧使用相同的(测试)X509证书来识别自己.单独地,我可以通过https连接到它们,需要客户端证书"tester".

到目前为止,我们通过nginx设置隐藏了CORS问题,这使得前端和后端看起来是相同的Origin.我已经为所有请求实现了标题'Access-Control-Allow-Origin','Access-Control-Allow-Credentials'; 使用方法,预检检查请求的标题(OPTIONS).

• 在Chrome中,像这样的跨站点工作得很好.我可以看到前端URL和后端URL是不同的站点.我看到在发出后端请求之前发出了OPTIONS请求.

• 即使Chrome似乎不需要它,我确实找到了将用于执行请求的xmlhttprequest对象并对其执行了操作xhr.withCredentials = true,因为这似乎是fetch.js在它获取时所做的事情"credentials":"include".我注意到有一个xhr.setRequestHeader可用的功能,我可能需要用来让Firefox开心.

  • Firefox对UI调用的行为相同.但对于所有后端调用,我得到405.当它这样做时,没有与服务器建立网络连接.浏览器刚刚决定这是405而没有执行任何https请求.尽管这与Chrome的行为不同,但这种做法还是有意义的.前端UI和后端服务都需要选择客户端证书.当我连接到UI时,我选择了证书"tester".当它发出后端请求时,它可以假设应该使用相同的客户端证书来到达后端.但也许它假设它可能会有所不同,而且我还需要告诉Firefox.

有没有人在这里使用CORS结合这样的2路SSL证书,并且有这个Firefox问题并在某处修复了它.我怀疑它不是服务器端修复,而是客户端需要做的事情.

在 Ionic 应用程序中发出跨源请求时，我只遇到 FireFox 问题（因此它使用的是 AngularJS）。js 应用程序正在对 Laravel 5.1 API 执行 $http.post()，我仅在 FireFox (39.0.3) 中收到以下错误：

跨域请求被阻止：同源策略不允许在http://blah.dev/endpoint读取远程资源。（原因：CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“content-type”）。

这是在我的本地主机（OSX Mavericks）上。并且在 Chrome 和 Safari 中运行良好，只有 FireFox 出现错误。我已经清除了缓存，并在“私人窗口”中进行了尝试，结果相同。

这是定义用于处理 OPTIONS 请求的 Laravel 路由：

Route::options('endpoint', function() {
    return response('OK')
        ->header('Access-Control-Allow-Headers ', 'Origin, Authorization, X-Requested-With, Content-Type, Accept')
        ->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Cache-Control', 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0')
        ;
});

Route::post('endpoint', array('uses' => '\Path\To\Controller@endpoint'));

我确实发现这个问题似乎只在 FireFox 中有类似的问题，但解决方案是用逗号分隔Allow-Methods，我已经是。