Angular多路径代理问题：HTML页面字体资源跨域报错

这个问题我之前也碰到过！核心原因是你返回的HTML里的字体引用用的是相对路径，浏览器会直接跳过你的Angular代理，去请求原域名https://data.domain.com，自然就触发CORS错误了——你的代理只处理了/data开头的API请求，但字体路径../fonts/...解析后是直接指向原域名的资源，完全绕开了代理。

下面给你几个可行的解决方案：

方案一：扩展代理规则，覆盖字体资源请求 #

你可以新增一个代理规则，让字体相关的请求也通过本地代理转发。

首先更新你的proxy.conf.json，添加针对字体路径的代理：

{
  "/API": {}, // 第一个代理正常
  "/info": {}, // 第二个代理正常
  "/data": {
    "target": "https://data.domain.com/v3/uk",
    "secure": false,
    "pathRewrite": { "^/data": "" },
    "changeOrigin": true,
    "logLevel": "debug"
  },
  "/fonts": {
    "target": "https://data.domain.com/v3/assets",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

接下来，你需要修改返回HTML中的字体路径，把../fonts/替换成/fonts/（这样浏览器会请求localhost:4200/fonts/...，再通过代理转发到原域名的正确路径）。如果没法直接修改后端返回的HTML，可以看方案二。

方案二：前端拦截响应，替换资源路径 #

因为你请求HTML时用的是responseType: 'text'，可以在收到响应后，用代码替换所有字体路径为代理兼容的路径。

修改你的数据服务代码：

private data = '/data';
public fetchData(data: Data) {
  return this.http.post(this.data, data, {responseType: 'text'}).pipe(
    map(htmlContent => {
      // 把所有../fonts/替换成/data/fonts/，让请求走代理
      return htmlContent.replace(/url\(\.\.\/fonts\//g, 'url(/data/fonts/');
    })
  );
}

同时更新proxy.conf.json，添加对应/data/fonts的转发规则：

{
  // 保留原有代理规则...
  "/data/fonts": {
    "target": "https://data.domain.com/v3/assets/fonts",
    "secure": false,
    "pathRewrite": { "^/data/fonts": "" },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

这样处理后，浏览器会请求localhost:4200/data/fonts/...，通过代理转发到原域名的字体资源，就不会触发CORS了。

方案三：后端修改资源路径（最优，若有权限） #

如果你能联系到后端团队，让他们返回的HTML中，把字体路径改成/data/fonts/...（和你的代理路径匹配），这样浏览器会直接走你的代理，前端不需要做任何额外处理，这是最省心的方案。

注意事项 #

• 修改proxy.conf.json后，必须重启Angular开发服务器，否则新的代理规则不会生效。
• 测试时打开浏览器控制台的Network标签，确认字体请求的路径是localhost:4200开头，而不是直接请求https://data.domain.com。

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