javascript - 对 localhost 的 CORS https 访问在 Chrome 上有效，但在 Firefox 上无效

Question

我在 Firefox 和 IE 上遇到了 CORS 问题，而 Chrome 似乎可以很好地处理相同的情况。

我需要从浏览器中运行的网络应用程序访问本地 Mongoose 服务器。我从我的 Web 应用程序发送 XMLHTTP 请求，这是一个 Google App 脚本 - HTMLService(由 https://script.google.com 提供)到运行在本地主机上运行的 Mongoose 服务器的本地客户端- 127.0.0.1:1234。 XMLHTTP 请求发送到

https://localhost:1234/ping

通过 HTTPS (GET)。服务器应以纯文本形式响应“PING_OK”消息。我们也将浏览器指向

https://localhost:1234/ping

将我们的测试认证为可信赖的来源。完成上述步骤后，Chrome 浏览器可以访问本地 mongoose 服务器，但 Firefox 失败并显示消息 "NS_ERROR_DOM_BAD_URI: Access to restricted URI denied"(IE 也失败)

还有一个测试 html 页面，当从 file:///c:test.html 提供时也可以访问

https://localhost:1234/ping

通过 Firefox 和 Chrome。

这是 html 中的 javascript:

  var xmlhttp;
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
  }


  //  set the onreadystatechange callback
  xmlhttp.onreadystatechange = function() {
    var xStatus = ['UNSENT','OPENED','HEADERS_RECEIVED','LOADING','DONE'];
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var response =  xmlhttp.responseText;
        console.log('Response: '+response);
    } else if((xmlhttp.readyState>0) && (xmlhttp.readyState<4)){
        console.log('state='+ xStatus[xmlhttp.readyState]+', status='+ xmlhttp.statusText);
    } else {
        console.log('state='+ xStatus[xmlhttp.readyState]+', status='+ xmlhttp.statusText);
      }
  }


  //  set the timeout value and the ontimeout callback

  xmlhttp.timeout = 30000;
  xmlhttp.ontimeout = function() {
       console.log('XHR timed out');
  }

  var url = 'https://localhost:1234/ping';
  var params = '';


  xmlhttp.open('POST', url, true);
  xmlhttp.send(params);

服务器证书是使用 openSSL 为 ""OTHER"(Mongoose-c++) 生成的测试证书，并使用以下选项进行设置。

这里是本地机器上mongoose服务器端的代码。

void FakeWebServer::handlePingRequest(struct mg_connection *conn) {

/// Set headers
mg_send_header(conn, "Access-Control-Allow-Origin", "*");
mg_send_header(conn, "Access-Control-Allow-Methods", "POST, GET, OPTIONS");
mg_send_header(conn, "Access-Control-Allow-Headers", "X-PINGOTHER");
mg_send_header(conn, "Access-Control-Max-Age", "1728000");

mg_send_header(conn, "Content-Type", "text/plain");

/// Send Fake Message
std::string msg = "PING_OK";
mg_send_data(conn, msg.c_str(), strlen(msg.c_str()));
}

当通过 google app scripy 部署为 webapp 时，上面的代码在 Chrome 中运行良好，但 Firefox 失败并显示“NS_ERROR_DOM_BAD_URI:访问受限 URI 被拒绝”

我是 javascript 编程的新手，我不确定这是我面临的 SSL 相关问题还是 CORS 问题...

1) 在这种两端的 ssl 访问中，我是否遗漏了任何其他参数或配置？

2) 还有为什么从 file:///*html 提供的页面能够访问

https://localhost:1234

通过 CORS 而从

提供时完全相同的 html

https://script.google.com

在 Firefox(和 IE)上失败。

非常感谢任何解决此问题的指示和建议。

Answer 1

我遇到了类似的问题，其中 Chrome 和 IE 工作正常，但 Firefox 在使用 Dojo 从 JavaScript 调用 WebAPI 时失败。事实证明，Firefox 发送的“接受” header 不同，我的 API 不支持。Chrome 发送这个:

Accept: */*

Firefox 发送这个:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

因此，Firefox 收到 500 错误。我通过覆盖 JavaScript 调用中的 header 解决了这个问题。这是使用 Dojo + TypeScript 的代码，但您应该能够在您的环境中执行类似的操作。

    var d = new Deferred();
    var token = this._getToken();
    var options = {
        method: 'GET',
        handleAs: 'json',
        headers: {
            'Accept': '*/*',
            'Authorization': 'Bearer ' + token
        }
    };
    request<Object>(url, options).then(
        function (result) {
            d.resolve(result);
        },
        function (err) {
            d.reject(err, true);
        }
    );
    return d.promise;

这只是一种解决方法。真正的问题在于，由于 Firefox 的“接受” header ，WebAPI 试图以 XML 格式返回响应。我从未将我的数据传输对象设置为 XML 格式，因此 WebAPI 抛出 500 错误。因此，作为最终解决方案，我像这样从 WebAPI 中删除了 XMLFormatter:

config.Formatters.Remove(config.Formatters.XmlFormatter);

一个更永久的解决方案是让 WebAPI 处理 XML，但我现在不这样做。