Angular 16集成Sentry功能正常，但CORS错误致Source Mapping失效

我的Angular项目中Sentry配置代码如下（main.ts）：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from "@angular/core";
import { AppModule } from './app/app.module';
import * as Sentry from '@sentry/angular-ivy'
import { BrowserTracing } from '@sentry/angular-ivy';

Sentry.init({
  dsn: "实际代码中已填写正确DSN，此处为安全修改",
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.routingInstrumentation,
    }),
    new Sentry.Replay(),
  ],

  tracesSampleRate: 1.0,
  tracePropagationTargets: ["http://localhost:4200/"],

  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});
enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

当前问题：

• 错误发生时Sentry能正常接收错误信息，但Source Mapping无法解析，看不到原始代码位置
• 浏览器控制台出现CORS错误
• 已尝试禁用浏览器广告拦截器，问题未解决

解决步骤： #

1. 检查Source Map上传与配置

• 确保编译Angular项目时生成了Source Map：在angular.json中确认configurations.production.sourceMap设置为true（生产环境默认开启，若手动关闭会导致失效）
• 使用Sentry CLI正确上传Source Map到Sentry：

  # 安装Sentry CLI
  npm install @sentry/cli --save-dev
  # 配置认证信息后执行上传（替换版本号和项目路径）
  npx sentry-cli releases files v1.0.0 upload-sourcemaps dist/your-project-name --url-prefix "~/assets" --validate
  

• 确认Sentry项目中对应版本已关联上传的Source Map，且版本号与构建时一致

2. 修复CORS错误

• 本地开发环境：修正tracePropagationTargets配置，去掉域名末尾的斜杠，改为["http://localhost:4200"]
• 生产环境：在静态资源服务器配置CORS响应头，允许Sentry域名访问Source Map：
  • Nginx示例（在location块添加）：

    add_header Access-Control-Allow-Origin "https://sentry.io";
    add_header Access-Control-Allow-Methods "GET, OPTIONS";
    

  • Apache示例（在.htaccess添加）：

    Header set Access-Control-Allow-Origin "https://sentry.io"
    Header set Access-Control-Allow-Methods "GET, OPTIONS"
    

• 验证Source Map文件可通过浏览器直接访问，无404或权限问题

3. 其他排查点

• 检查Sentry初始化配置中是否有拦截请求的额外设置，避免影响Source Map的获取
• 确认项目构建时未删除Source Map中的路径信息（Angular默认生产构建会保留）
• 清除浏览器缓存后重新触发错误，排除旧缓存干扰

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