Description:

Our application server (VM) is sending the data to the zipkin (hosted on cloud). The traces are appearing in the zipkin UI as desired.
However, when we try to fetch the data from the zipkin(using zipkin’s get api) in the application client (as per the use-case), we are getting CORS error.
Below is the details about the error.

Error:

Access to XMLHttpRequest at ‘$zipkin_url’ from origin ‘$https_origin’ has been blocked by CORS policy:
The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, ‘$https_origin’, but only one is allowed.

Where ‘$zipkin_url’ is the zipkin api url
and ‘$https_origin’ is our application url which is making request to the zipkin

We are using Clojurescript on the application client which is making this request:

(:require [cljs-http.client :as http])
(let [zipkin-url (str (config/get-env :zipkin) "api/v2/traces")
            response (<! (http/get zipkin-url {:headers {"Accept" "application/json"} :query-params {"serviceName" "xxxx"
                                                                                                     "spanName" "yyyyy"
                                                                                                     "limit" 100000}}))

Also, we are using zipkin docker image that has been deployed with the help of kubernetes and below is the values.yaml file, which we have added for the above error:

nginx.ingress.kubernetes.io/enable-cors: "true"
nginx.ingress.kubernetes.io/configuration-snippet: |
  add_header Access-Control-Allow-Origin "$https_origin";
  add_header Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT";
  add_header Access-Control-Allow-Credentials "true";

Inorder to resolve this issue, we tried changing some configuration in the values.yaml and added the below property as mentioned in zipkin’s documentation:

env:
- name: ZIPKIN_QUERY_ALLOWED_ORIGINS     
value: "$https_origin"

Now the error is changed to:

Access to XMLHttpRequest at ‘$zipkin_url’ from origin ‘$https_origin’ has been blocked by CORS policy:
The value of the ‘Access-Control-Allow-Credentials’ header in the response is ” which must be ‘true’ when the request’s
credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the
withCredentials attribute.

We already have gone through the related issues on the internet, but still can’t find any solution.
Can somebody please suggest on how to resolve this issue?

P.S: On running chrome with “–disable-web-security” flag, there is no issue and everything works fine.