其URL包含嵌入凭据的子请求解决方案被阻止
use*_*662 5 ajax jquery google-chrome ip-camera cors
我一直在使用这种嵌入式凭据方法从IP摄像头中检索照片.现在谷歌Chrome更新阻止了这种方法,我收到了这个错误:
[弃用]其URL包含嵌入凭据(例如
https://user:pass@host/)的子资源请求被阻止.有关详细信息,请参阅https://www.chromestatus.com/feature/5669008342777856.
我尝试了另一种方法,使用基本身份验证的JQuery Ajax.但我得到了另一个错误.
XMLHttpRequest无法加载example.com.对预检请求的响应未通过访问控制检查:请求的资源上不存在"Access-Control-Allow-Origin"标头.因此,不允许来源" http://example.com "访问.响应具有HTTP状态代码401.
我不能对Ip相机中的Web服务进行任何更改以允许跨域请求.
看起来我只剩1个选项,即从服务器端检索图像,并将其提供给浏览器？但这会浪费我的服务器带宽.
还有更多的建议/想法吗？
谢谢.
一种方法是使用请求拦截器，例如ModHeader。它可以作为 Chrome 的扩展安装，并且具有解决您的问题所需的功能。
所以你需要遵循这个方法：
- 从 Chrome 网上应用店安装扩展程序。
- 通过连接您的用户名和密码来创建一个字符串，例如它们之间用冒号 (
username:password) 分隔。阅读HTTP 基本授权。 - 对您刚刚创建的字符串进行 Base64 编码。
- 打开 ModHeader 的设置面板。
- 在请求标头部分中，添加名称为
Authorization、值为 的标头Basic encoded_string。替换encoded_string为您在步骤 3 中编码的字符串。请参阅下面的快照。 - 现在您可以直接获取照片，而无需在其前面添加
username:password@. 因此，您的 URL 将类似于http://example.com/snap。
为什么它能解决问题？
基本上您之前所做的就是在 URL 本身中传递授权详细信息。这是一种常见的情况，但显然会泄露凭据，因此不是一种安全的方法。
Authorization幸运的是，使用header 也可以完成同样的事情。您只需以编码形式传递凭据即可。ModHeader 会为您做到这一点。它拦截浏览器的每个请求并在其中附加此标头。
但要注意，它会拦截所有请求。因此，建议仅在从 IP 摄像机获取照片时使用它。对于所有其他情况，请记住禁用它。