视频联网云平台EasyCVS前端调用报Access-Control-Allow-Origin错误解决方案

一般我们的视频联网云平台EasyCVS是配合EasyCVR使用的,视频联网云平台EasyCVS能够对EasyCVR进行统一的分析管理,适合很多不同的项目场景使用。

视频联网云平台EasyCVS前端调用报Access-Control-Allow-Origin错误解决方案_第1张图片

在我们研发人员前端调用EasyCVS服务时,发现服务器报错Access-Control-Allow-Origin:

681.png

我们可以看到这个几个关键字:Access-Control-Allow-Origin,第一反应就是考虑这个报错是否是跨域引起的。

1、什么是跨域?

在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。

2、什么是同源策略?

同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

同源策略限制以下几种行为:

  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM和JS对象无法获得
  • AJAX 请求不能发送

3、常见的跨域场景

视频联网云平台EasyCVS前端调用报Access-Control-Allow-Origin错误解决方案_第2张图片

4、后端支持跨域请求

因为EasyCVS后端服务和EasyCVS前端是分离开发的,且前端通过Nginx部署的,属于不同的服务,前端请求后端接口会产生跨域问题。所以EasyCVS后端需要支持跨域请求。

视频联网云平台EasyCVS前端调用报Access-Control-Allow-Origin错误解决方案_第3张图片

5、后端配置

EasyCVS后端配置所有域名都可以访问接口,且支持GET、POST、PUT、PATCH、OPTIONS、DELETE形式的请求。至此,EasyCVS前端请求后端接口就不会产生上面问题了。

你可能感兴趣的:(EasyCVR,视频上云)