Angular 16调用SigNoz /v1/traces端点遇CORS问题

核心排查与修复步骤 #

1. 确认OTel Collector端口是否配置错误 #

你当前请求的3301是SigNoz仪表盘的UI端口，OTel Collector的HTTP接收端口默认是4318。请立即检查Angular代码中的OTel exporter配置，将端点改为：

// 示例配置
const exporter = new OTLPTraceExporter({
  url: 'http://10.50.21.234:4318/v1/traces'
});

这是最可能导致问题的原因——你把UI端口当成了OTel数据接收端口。

2. 验证OTel Collector的CORS配置是否生效 #

找到SigNoz部署的otel-collector-config.yaml配置文件，检查otlp接收器的HTTP CORS配置是否正确：

receivers:
  otlp:
    protocols:
      http:
        cors:
          allowed_origins:
            - "*" # 开发环境临时使用，生产环境替换为具体域名
          allowed_headers: ["*"]
          allowed_methods: ["POST", "OPTIONS"]

修改配置后，重启OTel Collector服务：

• Docker部署：docker restart signoz-otel-collector
• 二进制部署：重启对应的otel-collector进程

3. 检查浏览器预检请求响应 #

在浏览器开发者工具的Network面板中，找到OPTIONS类型的预检请求，查看Response Headers：

• 如果没有Access-Control-Allow-Origin头，说明配置未生效，需重新检查配置文件路径和服务重启状态
• 如果存在该头但不包含http://localhost:4200，需调整allowed_origins配置

4. 开发环境临时绕过方案（代理） #

在Angular项目根目录创建proxy.conf.json：

{
  "/v1/traces": {
    "target": "http://10.50.21.234:4318",
    "secure": false,
    "changeOrigin": true
  }
}

修改angular.json的serve配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-app-name:build",
    "proxyConfig": "proxy.conf.json"
  }
}

重启Angular开发服务器，将请求路径改为/v1/traces，由代理转发到OTel Collector。

5. 生产环境规范配置 #

• 避免使用通配符*，将allowed_origins设置为前端实际域名（如https://your-frontend.com）
• 可通过Nginx等反向代理统一处理CORS规则，将前端请求转发到OTel Collector端口

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