无法让XmlHttpRequest与CORS一起使用

时间:2017-08-15 14:52:14

标签: xmlhttprequest cors

我制作了一个小型应用程序,它通过rs232从称重秤获取数据,并使用内置Web服务器在http://localhost:51111/Scale1?min=1.5&max=420之类的URL上返回该数据。参数是将一些配置数据设置为比例。

现在我需要在网页中获取数据,这是从中央计算机上的IIS服务器提供的。这里有一个CORS问题,但我的firefox似乎支持CORS:

var supportsCORS = (new XMLHttpRequest()).withCredentials !== undefined;

返回True。

使用几本论坛和JS书籍上的信息,我制作了这个JS代码:

    function httpGetAsync() {
        var theUrl = 'http://localhost:51111/Scale1?min=1.5&max=420';
        var req = new XMLHttpRequest();
        req.onreadystatechange = function () {
            if (req.readyState == XMLHttpRequest.DONE) {
                $('#value').text('state: ' + req.readyState + ', status: ' + req.status + ', text: ' + req.responseText);
            }
        }
        req.open("GET", theUrl, true); // true for asynchronous 
        req.send(null);
        return;
    }

网页有额外的HTTP标头,允许跨源请求脚本(CORS):

Access-Control-Allow-Origin: http://localhost:51111
Access-Control-Allow-Methods: GET,POST

使用Fiddler和Firefox调试器(F12)我可以看到JS确实向本地应用程序发送请求,监听端口51111,在该应用程序上我可以看到最小/最大数据被正确接收,并且状态为200的app响应,以及正文中的一些数据,这是原始响应:

HTTP/1.1 200 OK
Content-Length: 4
Server: Microsoft-HTTPAPI/2.0
Date: Tue, 15 Aug 2017 14:36:50 GMT

1.15

看起来很酷,但是:

我的问题是上面的JS没有正文内容:req.status为零0而不是200,而req.responseText是空字符串而不是“1.15”。

我尝试过Firefox和Chrome。

1 个答案:

答案 0 :(得分:0)

需要将http://localhost:51111服务器配置为发送Access-Control-Allow-Origin响应标头和任何其他必要的Access-Control-Allow-*响应标头。那是因为它是前端JS代码发送请求的服务器。

问题中引用的响应并未显示那些作为响应标头收到的响应,因此您似乎不能将http://localhost:51111服务器配置为发送它们。

默认情况下,浏览器不允许您的前端JS代码从跨源请求访问响应 - 除非服务器选择允许它。服务器选择允许跨源请求的方式是在响应中发送Access-Control-Allow-Origin响应头。

CORS协议的所有实际执行都是由浏览器完成的。因此Access-Control-Allow-Origin响应标头是服务器用于与浏览器通信的标头;服务器使用它来告诉浏览器他们希望浏览器将来自此服务器的响应暴露给。

这就是为什么在您的情况下http://localhost:51111服务器是您需要配置以发送正确的Access-Control-Allow-Origin响应标头的服务器。