Angular 11应用加载Tableau报表遇X-Frame-Options SameOrigin错误的解决方法

核心原因 #

这个错误是Tableau服务器端设置了X-Frame-Options: sameorigin响应头，限制仅允许同源页面嵌入其内容，前端Angular的iframe配置无法绕过这个服务器端限制。

可行解决方案 #

1. 配置Tableau服务器允许嵌入 #

如果有权限操作Tableau服务器，修改服务器的iframe嵌入策略：

• 对于Tableau Server：进入管理控制台的设置 > 安全性，找到嵌入设置，将你的Angular应用域名添加到允许嵌入的域名列表。
• 对于Tableau Online：登录后进入站点设置 > 嵌入，开启“允许嵌入到外部网站”并添加应用域名。

2. 严格使用Tableau JavaScript API实现 #

不要直接用原生iframe，按照Tableau JS API的标准流程开发：

• 组件中初始化API的示例代码：

  import { Component, OnInit, ElementRef } from '@angular/core';
  
  declare var tableau: any;
  
  @Component({
    selector: 'app-tableau-report',
    template: '<div #tableauViz></div>'
  })
  export class TableauReportComponent implements OnInit {
    constructor(private elRef: ElementRef) {}
  
    ngOnInit(): void {
      const vizContainer = this.elRef.nativeElement.querySelector('#tableauViz');
      const reportUrl = 'https://server.tableau.com/views/YourReport/YourDashboard';
      const vizOptions = {
        hideTabs: true,
        hideToolbar: true,
        width: '100%',
        height: '800px'
      };
      new tableau.Viz(vizContainer, reportUrl, vizOptions);
    }
  }
  

• 在angular.json中正确引入Tableau API脚本：

  "scripts": [
    "https://your-tableau-server/javascripts/api/tableau-2.min.js"
  ]
  

3. 开发环境临时使用Angular代理 #

仅适用于本地开发测试，通过代理让请求同源：

• 项目根目录创建proxy.conf.json：

  {
    "/tableau-proxy": {
      "target": "https://server.tableau.com",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": {
        "^/tableau-proxy": ""
      }
    }
  }
  

• 修改angular.json的启动配置，指定代理文件：

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-app:build",
      "proxyConfig": "proxy.conf.json"
    }
  }
  

• 组件中使用代理后的URL：

  const reportUrl = '/tableau-proxy/views/YourReport/YourDashboard';
  

注意：此方法不能用于生产环境，生产环境仍需依赖Tableau服务器端的嵌入权限配置。

内容的提问来源于stack exchange，提问作者Siva Sathappan