open-telemetryopen-telemetry-collector

CORS error when calling the opentelemetry collector


I am able to send logs to OpenTelemetry normally from my local javascript project (http://localhost:3000) using the below configuration:

receivers:
  otlp:
    protocols:
      http:
        cors:
          allowed_origins:
            - http://localhost:3000
          max_age: 7200
        endpoint: 0.0.0.0:4318
exporters:
  debug:
    verbosity: detailed
service:
  pipelines:
    traces:
      receivers: [otlp]
      exporters: [debug]
    metrics:
      receivers: [otlp]
      exporters: [debug]
    logs:
      receivers: [otlp]
      exporters: [debug]

Note that I am using the original collector => https://github.com/open-telemetry/opentelemetry-collector

But I am not able anymore to send logs to the collector when using https://github.com/open-telemetry/opentelemetry-collector-contrib which is a superset of the opentelemetry collector

I got

Access to resource at 'http://localhost:4318/v1/traces' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any ideas ?


Solution

  • CORS policy cannot be configured for the opentelemetry-collector-contrib image so it seems there is no way for the frontend application (running on a browser) to connect to it directly although I didn't found any documentation in opentelemetry-collector-contrib that confirms that.

    (Note: The collector can be called via postman or curl as no CORS policy there as well as from backend services)

    So the CORS policy should be configured somewhere else.

    What I tried is to use a reverse proxy like nginx that will play the role of a mediator between the browser and the collector

    Below is the configuation of this proxy:

    server {
            server_name localhost;
            listen 80;
            
            location /v1/choose_an_api-endpoint {
                proxy_pass http://localhost:4318/v1/traces; # the collector url
    
                if ($request_method = 'OPTIONS') {
                    add_header Access-Control-Allow-Origin "http://localhost:3000"; # consider that the frontend application is running on the port 3000 locally
                    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
                    add_header Access-Control-Allow-Headers "Authorization, Content-Type, Origin, Accept";
                    add_header Access-Control-Allow-Credentials true;
                    return 204;
                }
            }
    }
    

    The call will be redicted from the proxy to the collector by adding the required headers