javascript - 跨域 AJAX(飞利浦 Hue Lights)

Question

我正在构建一个 Web 应用程序，该应用程序使用语音识别和文本转语音，通过 HTML 页面执行操作/显示各种数据(使用 JS(用于 AJAX 的 jQuery)/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”)访问上面显示的本地托管 URL 时，所有命令都可以工作。

但是，当我尝试从托管在 HTTPS 服务器上的 Web 应用程序使用 jQuery AJAX 请求“GET”/“PUT”时，该命令失败。我尝试使用“Access-Control-Allow-Origin: *”设置 AJAX 函数 header 属性。我还尝试在 AJAX 函数中将“crossDomain”属性设置为 true。我还尝试将“dataType”属性设置为“json”和“jsonp”，但它仍然不起作用。

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

我在互联网上阅读了很多其他帖子/信息，但似乎找不到明确的答案。我想请教一些更有经验的人:

考虑到我上面描述的场景，我想要完成的事情是否可能实现？或者我必须以不同的方式实现这一目标？

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

Answer 1

您遇到了“混合内容”安全问题。

基本上，当您在安全 URL (https) 上托管页面时，您无法访问不安全 (http) 资源，除非出现混合内容错误。此错误在浏览器的控制台中可见(通常通过 F12 访问)，当 Web 开发期间出现某些问题时，请始终检查控制台是否有错误。

要解决此问题，您可以暂时禁用安全性并允许不安全的请求。例如，Chrome 在地址栏中显示一个盾牌，您可以单击它来暂时禁用警告。 Firefox 在地址栏中的锁定图标上显示可点击的警告覆盖层。

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

解决方案应该是发送 Content-Security-Policy header 。基于 http://content-security-policy.com/ 的文档以下 header 应允许向任何资源发送 XMLHttpRequest:

内容安全策略:connect-src *

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

在使用此方法之前，请确保您了解发送此 header 时的安全隐患。