升级至Angular 18并使用esbuild构建器出现CORS错误

针对你升级到Angular 18+esbuild后遇到的woff2字体CORS问题，以及“仅提供构建资源、其余请求代理到后端”的需求，可按以下步骤调整原webpack代理配置：

1. 修改代理配置文件（proxy.conf.js） #

原配置的/**会代理所有请求，包括Angular构建生成的静态资源（如woff2字体），导致这些资源被转发到后端引发跨域。需添加资源排除规则，让前端静态资源直接由dev server提供：

const PROXY_HOSTNAME = process.env.PROXY_HOSTNAME || 'localhost';

const PROXY_CONFIG = [
  {
    context: ['/**'],
    target: `http://${PROXY_HOSTNAME}:3000`,
    secure: false,
    timeout: 360000,
    changeOrigin: true,
    // 排除前端构建资源，直接返回本地路径
    bypass: (req) => {
      // 匹配JS/CSS/woff2字体、assets目录资源
      if (req.path.match(/\.(js|css|woff2)$/) || req.path.startsWith('/assets/')) {
        return req.path;
      }
    }
  }
];

module.exports = PROXY_CONFIG;

2. 关联代理配置到esbuild构建器 #

确保angular.json中serve环节的esbuild构建器正确引用代理配置，和webpack时代的配置方式一致：

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

3. 验证效果 #

启动开发服务器后：

• Angular编译生成的JS、CSS、woff2字体、assets目录下的资源，会直接由本地dev server提供，不会触发代理
• 所有非前端资源的请求（如API接口）会被自动代理到后端服务器http://${PROXY_HOSTNAME}:3000

这样既解决了woff2字体的CORS错误，又完全满足你的需求。

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