跨域配置验证方法

第三方对接羚羊云录像或图片时，需要在羚羊云中央新增对第三方域名的跨域访问配置，否则第三方调用羚羊云的资源时，会提示跨域相关的报错。

此文档提供了允许第三方跨域访问的配置方法和验证跨域配置有效性的方法。

允许第三方跨域访问的配置方法

  1. 修改羚羊云中央的nginx配置，允许第三方跨域访问
  • vim /etc/nginx/map.conf (添加需要访问的域名)
  1. map http_origin corsHost {
  2.    default                              'https://antelopecloud.cn';
  3.    ~^(.*).topvdn.com(:(\d+))?$          $http_origin;
  4.    ~^(.*).antelopecloud.cn(:(\d+))?$    $http_origin;
  5.    ~^(.*).lingda.com(:(\d+))?$          $http_origin;
  6.    ~^(.*).lingdanet.com(:(\d+))?$       $http_origin;
  7.    ~^(.*).netposa.com(:(\d+))?$         $http_origin;
  8. }
  • vim /opt/nginx/html/crossdomain.xml (添加需要访问的域名)
  1. <?xml version="1.0"?>
  2. <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
  3. <cross-domain-policy>
  4.    <allow-access-from domain="*.topvdn.com" />
  5.    <allow-access-from domain="*.antelopecloud.cn" />
  6.    <allow-access-from domain="*.lingdanet.com" />
  7.    <allow-access-from domain="*.netposa.com" />
  8.    <allow-http-request-headers-from domain="*.topvdn.com" headers="*" />
  9.    <allow-http-request-headers-from domain="*.antelopecloud.cn" headers="*" />
  10.    <allow-http-request-headers-from domain="*.lingdanet.com" headers="*" />
  11.    <allow-http-request-headers-from domain="*.netposa.com" headers="*" />
  12. </cross-domain-policy>
  • 修改完后需 reload nginx

验证跨域配置有效性的方法

  • curl 验证方法
  1. curl -i -X GET \
  2.   'https://xxxx' \  # 羚眸地址或中央地址
  3.   -H 'Origin: www.nccxgh.com' \
  4.   -H 'Content-Type: application/json' \
  5.   -H 'cache-control: no-cache'
  • html 验证方法

  1. 找台机器启一个nginx服务，并记录其IP地址

  2. 在本机hosts文件配置第三方域名到nginx服务IP地址的静态解析

  3. 获取一个播放录像的URL
    方法之一是打开羚眸页面，播放录像回放，按F12键可在浏览器开发者工具中获取录像的播放地址。

  4. 部署测试页面到nginx服务

  5. 在下列测试页面代码中找到跨域测试请修改一下播放地址注释项，将source修改为上一步骤获取的录像播放地址。

  6. 保存后（如：test.html），将测试文件放到nginx服务默认站点的根目录。

  7. 测试
    在本机，打开浏览器，地址栏输入http://第三方域名/test.html，能播放录像，则配置成功。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="x-ua-compatible" content="IE=edge" />
  6.     <meta
  7.       name="viewport"
  8.       content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
  9.     />
  10.     <title>Aliplayer在线配置</title>
  11.     <link
  12.       rel="stylesheet"
  13.       href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"
  14.     />
  15.     <script
  16.       type="text/javascript"
  17.       charset="utf-8"
  18.       src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"
  19.     ></script>
  20.   </head>
  21.   <body>
  22.     <div class="prism-player" id="player-con"></div>
  23.     <button id="btn">停止</button>
  25.     <script>
  26.       var player = new Aliplayer(
  27.         {
  28.           id: "player-con",
  29.           width: "100%",
  30.           height: "500px",
  31.           autoplay: true,
  32.           isLive: true,
  33.           playsinline: true,
  34.           preload: true,
  35.           controlBarVisibility: "hover",
  36.           useH5Prism: true,
  37.           // 跨域测试请修改一下播放地址
  38.           source: "https://jxsr-api.antelopecloud.cn/cloud/v2/live/538462729.m3u8?client_token=538462729_0_1590540869_7de2d3012b8abbdf7a6ddac92388583b",
  39.         },
  40.         function (player) {
  41.           console.log("播放器创建了。");
  42.         }
  43.       );
  44.       document.getElementById("btn").onclick = function () {
  45.         console.log(11);
  46.         player.pause();
  47.       };
  48.     </script>
  49.   </body>
  50. </html>