Tableau REST API报错及IE中嵌入PHP网站仪表盘异常求助

嘿，我之前在做Tableau嵌入IIS部署的PHP站点时，也碰到过一模一样的IE兼容性坑，结合你的场景，给你梳理几个关键的排查和解决方向：

• 强制IE使用最新文档模式
  IE默认可能会切换到兼容模式，导致现代JS特性失效。在你的PHP页面头部添加这个meta标签，强制IE用最高版本的渲染引擎：

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  

  另外可以在IIS的站点配置里添加对应的HTTP响应头，避免用户本地IE的兼容性视图设置覆盖页面配置。

• 适配Tableau JavaScript API版本与添加Polyfill
  新版Tableau JS API对IE11的支持已经弱化了，如果你的项目用了较新的API版本，建议降级到2019.x系列的兼容版本。同时，IE11不支持原生Promise，而Tableau API大概率会用到这个特性，所以要添加Promise的polyfill：

  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
  

  把这段代码放在Tableau API脚本之前加载。

• 优化iframe的IE专属配置
  IE的iframe有一些特殊的权限和渲染限制，试试给iframe加上这些属性：

  <iframe id="tableauViz" 
          src="你的Tableau仪表盘嵌入URL" 
          width="100%" 
          height="800px" 
          frameborder="0"
          allowtransparency="true"
          security="restricted">
  </iframe>
  

  还要确认嵌入URL里包含?:embed=yes&:display_count=no这类参数，确保Tableau以嵌入模式加载。

• 修复REST API的IE兼容性问题
  如果你的REST API请求用了Fetch API，IE11是不支持的，要换成XMLHttpRequest，或者添加Fetch的polyfill。另外，如果Tableau Server和你的IIS站点跨域，必须在IIS的Web.config里开启CORS：

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
  

  同时检查请求URL是否有IE无法解析的特殊字符，记得做URL编码处理。

• 排查Tableau Server与IE的权限/设置问题
  登录Tableau Server管理后台，确认服务器允许IE浏览器访问。另外，IE默认可能会阻止第三方cookie，如果你的嵌入需要用户登录Tableau，要在IE的隐私设置里允许Tableau Server域名的cookie。

• 用IE开发者工具定位具体错误
  按F12打开IE的开发者工具，切换到控制台，查看详细的报错栈信息——“Unable to get property '' of undefined or null reference”通常是某个对象还没初始化就被调用了，比如你可能在iframe还没加载完成就初始化了Tableau Viz对象。可以改成这样确保加载顺序：

  document.getElementById('tableauViz').onload = function() {
    var viz = new tableau.Viz(this, '你的仪表盘嵌入URL');
  };
  

  同时去Tableau Server的日志目录（ProgramData\Tableau\Tableau Server\data\tabsvc\logs）找REST API的报错详情，比如权限不足、请求格式错误等。

内容的提问来源于stack exchange，提问作者najam khan