跨域 AJAX（飞利浦 Hue Lights）

Question

我正在构建一个使用语音识别和文本到语音的 Web 应用程序，它通过 HTML 页面执行操作/显示各种数据（使用 JS（用于 AJAX 的 jQuery）/HTML/CSS 构建。）这个网站应用程序托管在不在我的本地网络上的 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 函数头属性。我还尝试在 AJAX 函数中将“crossDomain”属性设置为 true。我也试过将“dataType”属性设置为“json”和“jsonp”，但还是不行。

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

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

考虑到我上面描述的情况，我正在尝试完成的事情是否可能？还是我必须以不同的方式实现这一目标？

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

Answer 1

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

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

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

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

解决方案应该是发送 Content-Security-Policy 标头。根据来自 http://content-security-policy.com/ 的文档，以下标头应允许 XMLHttpRequests 访问 任何 资源：

内容安全策略：connect-src *

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

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