CORS https访问localhost在Chrome上有效，但在Firefox上无效

CORS https access to localhost works on Chrome but NOT on Firefox

本文关键字：有效 Firefox 无效 但在 Chrome https 访问 localhost CORS      更新时间：2023-09-26

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

我需要从浏览器中运行的网络应用程序访问本地猫鼬服务器。我从我的web应用程序发送XMLHTTP请求，该应用程序是一个谷歌应用程序脚本-HTMLService（由https://script.google.com提供）到本地客户端，该客户端正在运行本地主机127.0.0.1:1234上运行的猫鼬服务器。XMLHTTP请求被发送到

https://localhost:1234/ping

通过HTTPS（GET）。服务器应以纯文本形式回复"PING_OK"消息。我们还将浏览器指向

https://localhost:1234/ping

将我们的测试认证为可信来源。经过上述步骤后，Chrome浏览器可以访问本地猫鼬服务器，但Firefox失败，并显示消息"NS_ERROR_DOM_BAD_URI:访问受限URI被拒绝"（IE也失败）

此外，从file:///c:test.html提供的测试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()));
}

当通过谷歌应用程序scropy部署为网络应用程序时，上面的代码在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）上失败。

任何解决这一问题的建议和建议都将不胜感激。

我也遇到过类似的问题，Chrome和IE运行良好，但Firefox在使用Dojo从JavaScript调用WebAPI时失败了。事实证明，Firefox发送的"接受"头是不同的，我的API不支持它。Chrome发送此消息：

Accept: */*

Firefox发送这个：

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

因此，Firefox收到一个500错误。我通过重写JavaScript调用中的头来解决这个问题。以下是使用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的"Accept"标头，WebAPI试图以XML格式返回响应。我从未将数据传输对象设置为XML格式，因此WebAPI抛出了一个500错误。因此，作为最终的解决方案，我从WebAPI中删除了XMLFormatter，如下所示：

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

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

相关文章：