跨域AJAX(飞利浦Hue灯)

时间:2016-06-16 21:13:47

标签: javascript json ajax cors philips-hue

我正在构建一个使用语音识别的Web应用程序。通过HTML页面(使用JS(jQuery for AJAX)/ HTML / CSS构建)执行操作/显示各种数据的文本到语音。此Web应用程序托管在不在我本地网络上的HTTPS服务器上

我已经设置并配置了一些名为" Philips HUE Lights"配备RESTful API,只能通过本地网络控制(在本地网络外部不可见)。

我可以通过访问CLIP调试器/ API工具(本地IP)" http:////debug/clip.html"来向设备发送命令。包含在他们的产品中。我能够将HTTP命令发送到" Philip HUE Bridge"这是向灯发出命令的设备。当我使用他们的API工具(GET," PUT,POST,DELETE)访问上面显示的本地托管网址时,所有命令都有效。

然而,当我尝试使用jQuery AJAX请求" GET" /" PUT"从我的HTTPS服务器上托管的Web应用程序,命令失败。我尝试使用" Access-Control-Allow-Origin:*"设置AJAX函数头属性。我也试过设置" crossDomain" AJAX函数中的属性为true。我也试过设置" dataType"属于" json"和" jsonp"它仍然无法工作。

我正在通过连接到本地网络的计算机访问我的HTTPS Web应用程序" HUE Bridge"连接到。鉴于我在同一网络上使用计算机,我认为这可能有用......

我在互联网上阅读了很多其他帖子/信息,但似乎无法找到明确的答案。我想问一些经验丰富的人:

考虑到我上面描述的场景,我正在尝试完成的是什么?或者我必须以不同的方式实现这一目标吗?

非常感谢任何帮助/建议。感谢。

1 个答案:

答案 0 :(得分:1)

您正在遇到"混合内容"安全问题。

基本上,当您在安全URL(https)上托管页面时,如果不出现混合内容错误,则无法访问不安全(http)资源。 在浏览器的控制台中可以看到此错误(通常由F12访问),当webdevelopment期间无法正常工作时,请始终检查控制台是否有错误。

要解决此问题,您可以暂时禁用安全性并允许不安全的请求。例如,Chrome在地址栏中显示屏蔽,您可以单击该屏蔽以暂时禁用警告。 Firefox在地址栏中的锁定图标上显示可点击警告覆盖。

这可能是开发的临时解决方法,但您不能指望用户禁用安全性。

解决方案应该是发送Content-Security-Policy标头。根据{{​​3}}中的文档,以下标题应允许XMLHttpRequests 任何 资源:

Content-Security-Policy:connect-src *

但是由于我没有足够的控制权来修改托管我文件的网络服务器上的标题,我无法对此进行测试。

在使用此方法之前,请确保在发送此标头时了解安全隐患。