How to set distributed tracing setting in RUM agent?

[Yungyoung_Ok (ooyy)]

Kibana version:7.5.2

Elasticsearch version:7.5.2

APM Server version:7.5.2

APM Agent language and version:RUM agent 4.7.0

Browser version:chrome 79.0.3945.130

Description of the problem including expected versus actual behavior. Please include screenshots (if relevant):

i want to trace both frontend with backend using distributed tracing.
like this...

But RUM agent is only show frontend tracing.

here is my config

1. RUM agent config
   elasticApm.init({
   serviceName:'service-name1',
   serviceUrl: 'http://apm-server-ip:8200',
   pageLoadTransactionName: pageName,
   distributedTracingOrigins: ['http://localhost:8080']
   })

2. Java agent config
   service_name=service-name2
   application_packages=my.package.name
   server_urls=http://apm-server-ip:8200
   span_frames_min_duration=-1ms
   use_path_as_transaction_name=true

3. HTTP response
   response.setHeader("Acess-Control-Allow-Origin","")
   response.setHeader("Acess-Control-Allow-Methods","")
   response.setHeader("Acess-Control-Allow-Headers","*")

Errors in browser console (if relevant):
And my console

Currently both web-server and WAS is tomcat. (Same origin)
In this case, Do I need to add that setting?
like this...

if i have to set this setting, how to i can set this setting?
I try to set this setting in Ajax, but chrome is shown like this.

[Hamidreza (Hamidreza Jahtalabziabari)]

Hi @Yungyoung_Ok,

Thanks using Elastic APM.

Would you please provide the requests that fail in your browser ? (You can copy them from the Networks tab in your browser's devtools). Please make sure to remove any sensitive or personal information from the requests though.

Also, which origin your web application is served from? (the address that you see in the browser address bar)

Cheers,
Hamid

[Yungyoung_Ok (ooyy)]

I added that setting to ajax for distribution tracking.
And I checked the above error on the console.

xmlHttpRequest.setRequestHeader("Origin","*");
xmlHttpRequest.setRequestHeader("Access-Control-Request-Headers","Origin, X-Requested-With, elastic-apm-traceparent")
xmlHttpRequest.setRequestHeader("Access-Control-Request-Method","POST");

2. my web server&was is tomcat.
   Connect to localhost: 8080 in a browser.
   I think, this setting is the same origin.
   is it right?
   Do I need to add the same origin setting in my current situation?
   If so, how do I solve the above error(refused to set unsafe...)?

How can I set it up like the picture below?
The picture below was captured at demo.elastic.co.

[Hamidreza (Hamidreza Jahtalabziabari)]

It seems that you are adding those headers manually in your frontend application and that's why the browser is showing those errors. In other words having xmlHttpRequest.setRequestHeader("Origin","*"); is not valid. These headers are automatically added by the browser to the OPTIONS request that the browser sends before the original POST request.

Only your backend (Java) application should be able to respond appropriately with the headers stated in our documentation.

Does this help answer your question?

[Yungyoung_Ok (ooyy)]

Yes, thank you!
I solved the problem.

My js page reads several js internally, which seems to have conflicted with other js.
Declaring rum.js read first solved the problem.