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 ?
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