无法获得XmlHttpRequest与CORS一起工作

问题描述:

我做了一个小型应用程序,它可以通过rs232从称重秤上获取数据,并通过内置web服务器返回数据,如http://localhost:51111/Scale1?min=1.5&max=420。参数是设置一些配置数据的规模。无法获得XmlHttpRequest与CORS一起工作

现在我需要从中央机器上的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的回复以及正文中的一些数据,这是原始回复E:

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

'http:// localhost:51111'服务器需要配置为发送'Access-Control-Allow-Origin'响应头和任何其他必需的'Access-Control-Allow- *'响应头。从你的问题,你不清楚你在哪里或如何设置这些,但在问题中引用的响应并没有显示它们被接收为响应标题,所以看起来你不应该有'http:// localhost:51111'服务器配置为发送它们 – sideshowbarker

+0

@sideshowbarker你是对的!额外的头文件需要在第二台服务器的响应中。我正在阅读https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS以了解这一点。如果你想发表你的评论作为解决方案,我会很乐意接受。 – Roland

+0

@sideshowbarker当您被列为该mozilla页面的贡献者时,您可能是正确的人告诉了一些关于CORS的信息,以了解为什么额外的头文件需要在第二台服务器的响应中,而不是在第一台服务器的响应中服务器。 – Roland

需要将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响应头。