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

注意 DataV可视化应用分享页域名变更可能会对您的可视化应用项目产生影响，对您造成的不便敬请谅解。请按照本文档提供的方法及时进行排查并解决问题。在此期间，新域名和旧域名会共存一段时间，方便您进行过渡。旧分享域名（datav.aliyun.com/share/）将在2021年9月3号之后自动跳转至（datav.aliyuncs.com/share/）。

域名变更的影响

  • 使用了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文件并重启服务器。