<p>I am trying to prepare my application so that I can deploy it via kubernetes in the cloud. Therefore I installed minikube to get accustomed with how to set up an ingress. Therefore I followed the <a href="https://kubernetes.io/docs/tasks/access-application-cluster/ingress-minikube/" rel="nofollow noreferrer">ingress documentation by kubernetes</a>. (NOTE: I did not expose my frontend service like they do in the beginning of the tutorial, as I understood it's not needed for an ingress).</p>
<p>But after hours of desperate debugging and no useful help by ChatGPT I am still not able to resolve my bug. Whenever I try to access my application via my custom host (example.com), I get <code>InvalidHostHeader</code> as a response.</p>
<p>For simplicity's sake right now my application simply has one deployment with one pod that runs a vuejs frontend. My <code>frontend-deployment.yaml</code> looks like this:</p>
<pre><code>apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend
  labels:
    app: frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
        - name: frontend
          image: XXXXXXXXXXX
          imagePullPolicy: Always
          ports:
            - name: http
              containerPort: 8080
</code></pre>
<p>My <code>frontend-service.yaml</code>:</p>
<pre><code>apiVersion: v1
kind: Service
metadata:
  name: frontend
spec:
  ports:
    - name: http
      port: 8080
      targetPort: http
  selector:
    app: frontend
  type: ClusterIP
</code></pre>
<p>I use the default NGINX ingress controller of minikube. And my <code>ingress.yaml</code> looks like this:</p>
<pre><code>apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: my-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: example.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: frontend
            port:
              name: http
</code></pre>
<p>Obviously, I configure my <code>/etc/hosts</code> file to map my minikube ip address to <code>example.com</code></p>
<p>Any help and also suggestions on best practices/improvements on the structure of the yaml files is welcome!</p>

raweber
<p>I fixed it. Interestingly, it was not about Kubernetes itself. The issue was the configuration of my ingress annotations (plus my vue.config file)</p>
<p>I got the needed annotations from <a href="https://%20%20%20%20https://gist.github.com/suprith-s-reddy/8335104439cea9f88f9687ce8b60204c" rel="nofollow noreferrer">here</a></p>
<pre><code>kubernetes.io/ingress.class: nginx
nginx.ingress.kubernetes.io/rewrite-target: /
nginx.ingress.kubernetes.io/enable-cors: &quot;true&quot;
nginx.ingress.kubernetes.io/ssl-redirect: &quot;true&quot;
</code></pre>
<p>For now, I fixed the issue of invalid host name on the vue side by simply allowing all hosts like this in the vue.config</p>
<pre><code>  devServer: {
allowedHosts: [
  'all', // https://webpack.js.org/configuration/dev-server/#devserverallowedhosts
],
</code></pre>
<p>this is obviosly only for local development!</p>
