海康、大华等网络摄像头RTSP_Onvif网页无插件直播流媒体服务器EasyNVR鉴权出现跨域问题的解决方法

背景分析

随着平安城市、智慧城市、雪亮工程、智能交通等各项建设的持续开展，安防逐渐得到普及，面对如此广阔的市场，对安防企业来说不仅仅是机遇更多的是挑战。现今大多数摄像头一直没能摆脱人工监控的传统监控方式，由此导致了大量视频数据堆积占用存储资源、实时性差、检索困难等问题，海量摄像头带来的海量视频数据检索工作需要耗费大量警力。

15.jfif

为了解决这些问题，近年来，视频监控行业发展方向主要为：“高清化、网络化、智能化”。视频监控设备技术性极强，系统的创新升级同时也在引导市场需求的变化并创造了新的市场需求。

EasyNVR鉴权引发跨域问题的研究

什么是跨域？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

解决方法

1、服务端处理
1）登录成功, 服务端主动写 token 到 cookie

按照之前的接口设计, 登录成功, 服务端在 HTTP Response Body 中返回 token,由客户端自己负责将 token 写入 cookie. 在跨域场景中, 这样就行不通了,由于浏览器的限制, 客户端无法将 token 写到非子域名 cookie. 改为服务端主动写 token 到 cookie 就没有这个问题了. 服务端在 HTTP Response Header 中添加 Set-Cookie 字段, 写入 token=xxx

2）服务端统一做充许跨域访问设置
服务端配置充许跨域并且携带cookie, 需要在 HTTP Response Header 中添加以下两项:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: $http_origin

Access-Control-Allow-Origin 不可以配置成 *, 而是当前HTTT前求客户端的 Origin

3）注销登录时, 服务端主动将 token 从 cookie 清理
Set-Cookie: token=; expires=Thu, 01 Jan 1970 00:00:00 GMT;

2、客户端处理

客户端不必显示保存 token 到 cookie. 所有和 EasyNVR 的交互接口需要添加跨域配置, xhrFields: { withCredentials: true } 和 crossDomain: true

例如跨域登录接口调用示例如下:

$.ajax({
    type: "GET",
    url: "http://other-domain/api/v1/login",
    xhrFields: { 
        withCredentials: true
    },
    crossDomain: true, 
    data: {
        username: 'admin',
        password: '21232f297a57a5a743894a0e4a801fc3'//admin
    }
});

QQ截图20191104094840.png