Angular 15内嵌跨域IFRAME遇X-Frame-Options错误，求ng serve配置方法

首先明确：你看到的错误是**被嵌入的目标站点（http://localhost:9887/）**在响应中设置了X-Frame-Options: sameorigin，浏览器因此禁止跨域嵌入。你的Angular项目本身的CSP、DomSanitizer配置没问题，但需要处理目标站点的响应头。

情况1：你能控制目标服务（localhost:9887） #

直接修改该服务的响应头配置：

• 移除X-Frame-Options头，或者将其设置为ALLOWALL（注意：部分旧浏览器仅识别ALLOW-FROM，现代浏览器更推荐使用CSP的frame-ancestors）
• 推荐替换为CSP头：Content-Security-Policy: frame-ancestors http://localhost:4200;（此处地址为你的Angular应用运行地址，允许它嵌入目标站点）

情况2：无法控制目标服务，用Angular代理修改响应头 #

Angular的proxy.conf.json可以通过钩子修改响应头，你之前的用法有误，按以下步骤配置：

1. 在项目根目录创建/修改proxy.conf.json：

{
  "/target": {
    "target": "http://localhost:9887",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/target": ""
    },
    "onProxyRes": function(proxyRes, req, res) {
      // 删除目标站点的X-Frame-Options头
      delete proxyRes.headers['x-frame-options'];
      // 可选：添加允许当前Angular应用嵌入的CSP头
      proxyRes.headers['Content-Security-Policy'] = 'frame-ancestors http://localhost:4200;';
    }
  }
}

2. 在angular.json的serve配置中指定代理文件：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "你的项目名称:build",
      "proxyConfig": "proxy.conf.json"
    }
  }
}

3. 修改组件中iframe的src为代理路径：

<iframe [src]="sanitizedUrl"></iframe>

// 组件内构造安全链接
sanitizedUrl = this.sanitizer.bypassSecurityTrustResourceUrl('/target');

4. 重启ng serve，请求会通过Angular代理转发，代理自动移除目标站点的X-Frame-Options头，浏览器不再拦截嵌入操作。

补充说明 #

你之前的理解没错，Angular proxy默认主要处理请求头，但通过onProxyRes钩子可以直接修改代理返回的响应头，这正是解决这类跨域嵌入问题的关键。

内容的提问来源于stack exchange，提问作者yehonatan yehezkel