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

标签 javascript json ajax cors philips-hue

我正在构建一个 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 应用程序。鉴于我使用的是同一网络上的计算机,我认为这可能有效......

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

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

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

最佳答案

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

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

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

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

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

内容安全策略:connect-src *

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

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

关于javascript - 跨域 AJAX(飞利浦 Hue Lights),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37869441/

相关文章:

asp.net - 不显眼的 Javascript 富文本编辑器?

Android 改造 - GET Json 数组

javascript - 如何使用ajax从客户端将文件发送到服务器端而不使用处理程序?

javascript - 全屏滑动站点,Lavalamp 不起作用

javascript - 使用 jquery 在所有带有文本区域的表单中搜索提交按钮

javascript - 使用underscorejs进行多维排序

ajax - ajax更新后重新初始化jsf自定义组件

javascript - 使用搜索建议

javascript - 在 td jquery 中添加一个 div

json - 从嵌套的 JSON 字符串中检索元素