Grafana Faro CORS problem

I’m using:
@grafana/faro-web-sdk”: “^1.3.7”,
@grafana/faro-web-tracing”: “^1.3.7”
in my Sveltekit Project.
I want to send frontend metrics to my grafana-agent.

I’m using this simple example:

import { initializeFaro } from '@grafana/faro-web-sdk';
const grafanaFaro = () => {
	return initializeFaro({
		url: "myagenturl:12345/collect",
		apiKey: "my api key",
		app: {
			name: "my app name",
			version: '1.0.0'
		}
	});
};
export default grafanaFaro;

But in the browser I’m getting this error:

The entire Grafana setup is running on Docker containers in Caprover.
Is the error only related to CORS in the Grafana agent? I’m asking because I tweaked the CORS settings and tried to allow my origin, but I’m still getting this error.

localhost is special for some browsers and they threat it “specially”. I would just use “cors everywhere” plugin in your browser, so you don’t need to deal with CORS issues on the localhost during development.
Then just configure proper cors_allowed_origins for your Grafana agent in the prod:

musavimoe Did you manage to solve the CORS problem?
I am also experiencing similar issue with the Agent Flow. I cannot configure it to work as Faro collector, and also get CORS error, eventhough I have added the cors_allowed_origins.

Here is my config.river:

faro.receiver "faroReceiver" {
    server {
	cors_allowed_origins = ["*"]
        listen_address = "0.0.0.0"		
        api_key="secret"
    }
    output {
        logs   = [loki.process.autologging.receiver]
        traces = [otelcol.exporter.otlp.tempo.input]
    }
}

and here is how I initialize Faro in Angular app:

var faro = initializeFaro({
  url: 'http://localhost:12347/collect',
   apiKey: 'secret',
  app: {
    name: 'MyAppX',
    version: '1.0.0',
    environment: 'production'
  },
  
  instrumentations: [
    ...getWebInstrumentations(),
    new TracingInstrumentation(),
  ],
});

do you notice something here missing or wrong? Is the port 12347 correct (default) port?

Thanks!

1 Like

We can easily overcome this through a CORS Proxy Server.

const proxyUrl = 'http://localhost:8080/'
.
.
initializeFarao{...
url: proxyUrl + 'http://localhost:12347/collect'
.
.

It should be working fine now.