Why css and png are not accessible?

问题

I have created an Ingress, Deployment and Service as follows:

apiVersion: v1
kind: Service
metadata:
  name: hello-kubernetes-first
spec:
  type: ClusterIP
  ports:
    - port: 80
      targetPort: 8080
  selector:
    app: hello-kubernetes-first
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: hello-kubernetes-first
spec:
  replicas: 3
  selector:
    matchLabels:
      app: hello-kubernetes-first
  template:
    metadata:
      labels:
        app: hello-kubernetes-first
    spec:
      containers:
        - name: hello-kubernetes
          image: paulbouwer/hello-kubernetes:1.8
          ports:
            - containerPort: 8080
          env:
            - name: MESSAGE
              value: Hello from the first deployment!
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: istio
  name: helloworld-ingress
spec:
  rules:
    - host: "hw.service.databaker.io"
      http:
        paths:
          - path: /
            backend:
              serviceName: hello-kubernetes-first
              servicePort: 80
---

When I call https://hw.service.databaker.io/, it blocks:

CSS and PNG. What am I doing wrong? I am using Istio 1.52.

The log of one of three pods has following content:

::ffff:127.0.0.1 - - [04/May/2020:10:25:06 +0000] "HEAD / HTTP/1.1" 200 680 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36" 
::ffff:127.0.0.1 - - [04/May/2020:10:33:33 +0000] "GET / HTTP/1.1" 200 680 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) snap Chromium/81.0.4044.129 Chrome/81.0.4044.129 Safari/537.36" 
::ffff:127.0.0.1 - - [04/May/2020:10:34:19 +0000] "GET / HTTP/1.1" 200 680 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) snap Chromium/81.0.4044.129 Chrome/81.0.4044.129 Safari/537.36" 
::ffff:127.0.0.1 - - [04/May/2020:10:34:20 +0000] "GET / HTTP/1.1" 200 680 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) snap Chromium/81.0.4044.129 Chrome/81.0.4044.129 Safari/537.36" 
::ffff:127.0.0.1 - - [04/May/2020:10:34:21 +0000] "GET / HTTP/1.1" 200 680 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) snap Chromium/81.0.4044.129 Chrome/81.0.4044.129 Safari/537.36" 
::ffff:127.0.0.1 - - [04/May/2020:10:34:22 +0000] "GET / HTTP/1.1" 200 680 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) snap Chromium/81.0.4044.129 Chrome/81.0.4044.129 Safari/537.36" 
::ffff:127.0.0.1 - - [04/May/2020:10:36:24 +0000] "GET / HTTP/1.1" 200 680 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) snap Chromium/81.0.4044.129 Chrome/81.0.4044.129 Safari/537.36" 
::ffff:127.0.0.1 - - [04/May/2020:10:36:25 +0000] "GET / HTTP/1.1" 200 680 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) snap Chromium/81.0.4044.129 Chrome/81.0.4044.129 Safari/537.36"

回答1:

It's not accessible because you have to show istio the path to it.

---

As @zero_coding mentioned in comments one way is to change the path

from

http:
        paths:
          - path: /
            backend:
              serviceName: hello-kubernetes-first
              servicePort: 80

to

http:
        paths:
          - path: /*
            backend:
              serviceName: hello-kubernetes-first
              servicePort: 80

---

Additionally I would add this Istio in practise tutorial here, it explains well second way of dealing with that problem, which is to add more paths.

Let’s break down the requests that should be routed to Frontend:

Exact path / should be routed to Frontend to get the Index.html

Prefix path /static/* should be routed to Frontend to get any static files needed by the frontend, like Cascading Style Sheets and JavaScript files.

Paths matching the regex ^.*.(ico|png|jpg)$ should be routed to Frontend as it is an image, that the page needs to show.

http:
  - match:
    - uri:
        exact: /
    - uri:
        exact: /callback
    - uri:
        prefix: /static
    - uri:
        regex: '^.*\.(ico|png|jpg)$'
    route:
    - destination:
        host: frontend             
        port:
          number: 80

来源：https://stackoverflow.com/questions/61590027/why-css-and-png-are-not-accessible