如何使用App Insights关联ASP.NET Core Razor应用的前后端数据？

解决方案 #

你可以按照以下步骤逐一排查修复：

1. 服务端CORS策略配置关联头权限
   你需要在服务端的CORS规则中显式暴露和允许App Insights关联所需的头部，否则浏览器会拦截跨源场景下的关联头传递，示例配置（Program.cs）：

   builder.Services.AddCors(options =>
   {
       options.AddPolicy("DefaultCorsPolicy", policy =>
       {
           // 按需调整允许的前端源地址，生产环境不要直接使用AllowAnyOrigin
           policy.WithOrigins("https://你的前端域名.com")
                 .AllowAnyHeader()
                 .AllowAnyMethod()
                 // 必须暴露关联所需的响应头
                 .WithExposedHeaders("Request-Id", "Request-Context", "traceparent", "tracestate");
       });
   });
   

2. 确认前后端App Insights资源完全一致
   检查前端JavaScript初始化时填写的connectionString/instrumentationKey，和服务端配置的App Insights密钥必须完全相同，使用不同的App Insights资源会直接导致数据无法关联。
3. 补充前端App Insights配置项
   除了你已配置的参数外，还需要开启W3C分布式追踪兼容模式，确保关联头格式和服务端匹配：

   // 先从SDK导入枚举
   import { DistributedTracingModes } from '@microsoft/applicationinsights-web';
   
   // 初始化配置中新增以下参数
   distributedTracingMode: DistributedTracingModes.AI_AND_W3C,
   enableAjaxPerfTracking: true
   

4. 验证关联头传递有效性
   打开浏览器开发者工具的网络面板，触发一次前端到服务端的请求，检查：
   • 请求头中是否携带traceparent、Request-Id字段
   • 响应头中是否返回Request-Context字段
     两个条件都满足时关联链路才能正常建立。
5. 等待数据同步
   配置正确后，App Insights平台需要1~5分钟的时间处理链路数据，之后应用地图会自动补全关联关系。

内容的提问来源于stack exchange，提问作者Matthias Güntert