CORS error when calling the opentelemetry collector

Question

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 ?

Answer 1

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