[BUG] When deploying and accessing service via HTTPS, the 'Running models' page always display 'No Running Models'

[qaz-t]

Describe the bug

i'm testing xinference in kubernetes, i've tried loadbalancer, traefik and istio to expose the service, and I notice when using loadbalancer, which url is http://<my_ip> ,everything is ok. When using traefik or istio, which tls cert is correctly configured, 80 to 443 redirection is always on and url is https://<my_domain> , running models page is empty, it shows No Running Models, through web dev tools, I got error in console

Mixed Content: The page at 'https://<my_domain>/ui/#/running_models' was loaded over HTTPS,
but requested an insecure resource 'http://<my_domain>/v1/models'.
This request has been blocked; the content must be served over HTTPS.
Error: TypeError: Failed to fetch
    at ds (fetcher.js:19:10)
    at index.js:57:7
    at index.js:111:5
    at ou (react-dom.production.min.js:244:332)
    at Sc (react-dom.production.min.js:286:111)
    at cc (react-dom.production.min.js:273:185)
    at Vo (react-dom.production.min.js:127:105)
    at react-dom.production.min.js:283:470
    at Cc (react-dom.production.min.js:281:398)
    at ac (react-dom.production.min.js:270:269)
(anonymous)  @  index.js:104
Promise.catch(async)
(anonymous)           @  index.js:103
(anonymous)           @  index.js:111
ou                    @  react-dom.production.min.js:244
Sc                    @  react-dom.production.min.js:286
cc                    @  react-dom.production.min.js:273
Vo                    @  react-dom.production.min.js:127
(anonymous)           @  react-dom.production.min.js:283
Cc                    @  react-dom.production.min.js:281
ac                    @  react-dom.production.min.js:270
C                     @  scheduler.production.min.js:13
E                     @  scheduler.production.min.js:14

when I directly access http://<my_domain>/v1/models or https://<my_domain>/v1/models, I can get the correct data.

To Reproduce

expose and access service using https with valid cert will cause the error

Expected behavior

running models page display current running models

Additional context

i also check the network activity, when using http, the following fetch events triggered by fetcher.js:19:

# general
Request URL: http://<my_ip>:9997/v1/models/
Request Method: GET
Status Code: 307 Temporary Redirect
Remote Address: <my_ip>:9997
Referrer Policy: strict-origin-when-cross-origin

# respons headers
Content-Length: 0
Date: <Date>
Location: http://<my_ip>:9997/v1/models
Server: uvicorn

# request headers
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Cookie: token=no_auth
Host: <my_ip>:9997
Pragma: no-cache
Referer: http://<my_ip>:9997/ui/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

and it cause another fetch activity

# general
Request URL: http://<my_ip>:9997/v1/models
Request Method: GET
Status Code: 200 OK
Remote Address: <my_ip>:9997
Referrer Policy: strict-origin-when-cross-origin

# respons headers
Content-Length: 238
Content-Type: application/json
Date: <Date>
Server: uvicorn

# request headers
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Cookie: token=no_auth
Host: <my_ip>:9997
Pragma: no-cache
Referer: http://<my_ip>:9997/ui/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

but when using https, only the first fetch activity happend, and then blocked by browser due to This request has been blocked; the content must be served over HTTPS. as I mentioned above.It is worth noting that in respons headers the Location is http:

# general
Request URL: https://<my_domain>/v1/models/
Request Method: GET
Status Code: 307 Temporary Redirect
Referrer Policy: strict-origin-when-cross-origin

# respons headers
Content-Length: 0
Date: <Date>
Location: http://<my_domain>/v1/models
Server: istio-envoy
X-Envoy-Upstream-Service-Time: 3

# request headers
:authority: <my_domain>
:method: GET
:path: /v1/models/
:scheme: https
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cache-Control: no-cache
Cookie: token=no_auth
Pragma: no-cache
Referer: https://<my_domain>/ui/
Sec-Ch-Ua: "Not_A Brand";v="8", "Chromium";v="120", "Microsoft Edge";v="120"
Sec-Ch-Ua-Mobile: ?0
Sec-Ch-Ua-Platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

[aresnow1]

This is related to the configuration of traefik, you can look at the discussion in this #722, and try this comment #722 (comment) .

[qaz-t]

@aresnow1 Thanks for the traefik solution，I also tested it successfully on istio, which can be used as an example.

apiVersion: networking.istio.io/v1alpha3
kind: EnvoyFilter
metadata:
  name: add-csp-header
  namespace: istio-ingress
spec:
  workloadSelector:
    labels:
      istio: ingressgateway
  configPatches:
    - applyTo: HTTP_FILTER
      match:
        context: GATEWAY
        listener:
          filterChain:
            filter:
              name: "envoy.filters.network.http_connection_manager"
              subFilter:
                name: "envoy.filters.http.router"
      patch:
        operation: INSERT_BEFORE
        value:
          name: envoy.lua
          typed_config:
            "@type": type.googleapis.com/envoy.extensions.filters.http.lua.v3.Lua
            inlineCode: |
              function envoy_on_response(response_handle)
                response_handle:headers():add("Content-Security-Policy", "upgrade-insecure-requests")
              end

[aresnow1]

Closed, feel free to reopen.