避免基本身份验证弹出窗口

Question

我一直在使用网络摄像机（TP LINK NC200），试图在html表单中显示快照。

当然，IP-CAM会通过弹出式窗口要求进行身份验证

所以我一直试图以这种方式解决它

    document.addEventListener('DOMContentLoaded', function(){
      getimg = document.getElementById('getimg');
      getimg.addEventListener('click', getsnap);
    });
    
    function getsnap(){
      user = 'admin'
      psw = 'YWRtaW4=' // base64 password
      url = "http://"+ user + ':' + psw + "@192.168.100.103:8080/snapshot.jpg";
      document.getElementById('cam_img').src = url;
    }

<input id="getimg" value="getimg" type="submit">
<iframe id="cam_img"></iframe>

因此显然嵌入式凭证被阻止（https://www.chromestatus.com/feature/5669008342777856）

我用Google搜索了不同的解决方案，有很多方法可以解决，其中大多数都被浏览器更新所淘汰，那么解决此问题的最佳方法是什么？我乐于接受任何想法，越简单越好，但这也可能是一条不错的学习曲线。

此外，当我手动解决Authorization POPUP时，这些标题就是

我尝试将此代码与ajax一起使用

var uName='admin';
var passwrd='admin';

$.ajax({
    type: 'GET',
    url: 'http://192.168.100.103:8080/snapshot.jpg',
     beforeSend: function (xhr){ 
        xhr.setRequestHeader('Authorization', "Basic " + btoa(uName+":"+passwrd)); 
    },
    success : function(data) {
      //Success block 
   },
   error: function (xhr,ajaxOptions,throwError){
    //Error block 
  },
});

但我一直收到此错误

任何帮助或指导将不胜感激！谢谢！

Answer 1

听起来像相机不允许跨源请求。假设您无法更改相机的网络服务器以允许这样做，那么最好的选择是在其前面运行某种代理。

这将允许您设置所需的任何cors标头，并为身份验证提供更大的灵活性。我个人可能会使用小型节点服务来完成此任务

有关cors的详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS。

我建议做基本的身份验证部分服务器端，然后创建一个随机密钥以用作对节点服务的身份验证