为了更好地支持分享,DataV大屏分享页域名即将从datav.aliyun.com/share/example切换为datav.aliyuncs.com/share/example,本文提供了此变更可能对您的DataV大屏项目造成的影响及解决方案。

注意 DataV大屏分享页域名变更可能会对您的大屏项目产生影响,对您造成的不便敬请谅解。请按照本文档提供的方法及时进行排查并解决问题。在此期间,新域名和旧域名会共存一段时间,方便您进行过渡。旧域名(datav.aliyun.com)计划在3月下线。

域名变更的影响

  • 使用了API作为数据源的组件,可能会因为域名变更导致跨域请求被拦截。
  • 轮播页面组件或者iframe 组件内打开的页面,可能会因为跨域限制导致iframe页面无法在新域名 datav.aliyuncs.com下被访问。
  • 使用了DataV 数据代理服务数据源的组件,可能会因为域名变更导致跨域请求被拦截。

域名变更问题的解决方案

DataV在发布页面提供了新的分享链接,您可以打开新的分享链接测试大屏是否正常运行。如果无法正常运行,您可以按照以下方式进行排查并解决问题。

  1. 检查您大屏中的组件是否使用了API作为数据源,如果是,请执行以下步骤:
    1. 如果组件的数据配置中没有勾选需要 cookie (不选择代理并且需要获取 cookie 时使用),请确保请求响应头response headers里包含: Access-Control-Allow-Origin: *
    2. 如果组件的数据配置中勾选了需要 cookie (不选择代理并且需要获取 cookie 时使用),需要根据request.headers.referer动态返回可以被跨域请求的响应头response headers,示例如下:
      当前页面地址 request.headers.referer 满足要求的响应头 response headers
      编辑页(http):http://datav.aliyun.com/admin/screen/216787 http://datav.aliyun.com/admin/screen/216787
      Access-Control-Allow-Origin: http://datav.aliyun.com
      编辑页(https):https://datav.aliyun.com/admin/screen/216787 https://datav.aliyun.com/admin/screen/216787
      Access-Control-Allow-Origin: https://datav.aliyun.com
      旧版分享页(https):https://datav.aliyun.com/share/xxx https://datav.aliyun.com/share/xxx
      Access-Control-Allow-Origin: https://datav.aliyun.com
      旧版分享页(http):http://datav.aliyun.com/share/xxx http://datav.aliyun.com/share/xxx
      Access-Control-Allow-Origin: http://datav.aliyun.com
      新版分享页(https):https://datav.aliyuncs.com/share/xxx https://datav.aliyuncs.com/share/xxx
      Access-Control-Allow-Origin: https://datav.aliyuncs.com
      新版分享页(http):http://datav.aliyuncs.com/share/xxx http://datav.aliyuncs.com/share/xxx
      Access-Control-Allow-Origin: http://datav.aliyuncs.com
  2. 检查您大屏中是否使用了iframe或者轮播页面组件,如果是,请执行以下步骤:
    1. 访问新版发布页的分享链接,检查iframe页面内容是否正常加载,如果无法正常加载,请执行下一步。
      说明 iframe页面没有正常加载,说明这个页面在响应头里做了X-Frame-Options限制,您填入的iframe页面地址不支持在datav.aliyncs.com 下被访问,需要按照以下步骤增加跨域支持。
    2. 删除响应头内的X-Frame-Options字段,或者修改响应头内的X-Frame-Options的内容,示例如下:
      当前页面地址 满足要求的响应头 response headers 需要包含的字段内容
      编辑页(http):http://datav.aliyun.com/admin/screen/216787
      X-Frame-Options: ALLOW-FROM http://datav.aliyun.com
      编辑页(https):https://datav.aliyun.com/admin/screen/216787
      X-Frame-Options: ALLOW-FROM https://datav.aliyun.com
      旧版分享页(https):https://datav.aliyun.com/share/xxx
      X-Frame-Options: ALLOW-FROM https://datav.aliyun.com
      旧版分享页(http):http://datav.aliyun.com/share/xxx
      X-Frame-Options: ALLOW-FROM http://datav.aliyun.com
      新版分享页(https):https://datav.aliyuncs.com/share/xxx
      X-Frame-Options: ALLOW-FROM https://datav.aliyuncs.com
      新版分享页(http):http://datav.aliyuncs.com/share/xxx
      X-Frame-Options: ALLOW-FROM http://datav.aliyuncs.com
  3. 检查您大屏中的组件是否使用了DataV 数据代理服务数据源,如果是,请执行以下步骤:
    • 方法一:
      1. 单击此处下载DataVProxy包中的 app.js 文件。
      2. 将下载的app.js文件替换服务器DataVProxy所在根目录下的同名文件,并重启服务器。
    • 方法二:
      1. 打开服务器中DataVProxy根目录下的app.js文件。
      2. 修改app.js 第20行的跨域头判断信息,增加datav.aliyuncs.com支持,如下所示。
        // 旧的 line 20:
        if (this.request.header.origin && this.request.header.origin.match(/(datav.aliyun.com|datav-ap-northeast-1.alibabacloud.com|datav-ap-southeast-1.alibabacloud.com)(:\d+)?/)) {
        
        // 新的 line 20:
        if (this.request.header.origin && this.request.header.origin.match(/(datav.aliyun.com|datav-ap-northeast-1.alibabacloud.com|datav-ap-southeast-1.alibabacloud.com|datav.aliyuncs.com)(:\d+)?/)) {
        										
      3. 修改完成后,保存app.js文件并重启服务器。