title: Nginx returning incorrect content-type
body: <p>I have a Vue.js application, and my deployment setup is very standard,</p>
  <blockquote>
  <p>Pod -&gt; Service -&gt; Ingress</p>
  </blockquote>
  <p>Here's the related code,</p>
  <p><strong>Dockerfile</strong>:</p>
  <pre><code>FROM node:lts-alpine AS build
  WORKDIR /app
  COPY . .
  
  # Default build mode
  ARG MODE=production
  
  # Build the dist folder
  RUN npm ci
  RUN npm run build ${MODE}
  
  # Serve from nginx
  FROM nginx:alpine
  COPY ./nginx.conf /etc/nginx/nginx.conf
  COPY --from=build /app/dist /usr/share/nginx/html
  </code></pre>
  <p><strong>Nginx.conf</strong>:</p>
  <pre><code>user  nginx;
  worker_processes  1;
  error_log  /var/log/nginx/error.log warn;
  pid        /var/run/nginx.pid;
  events {
    worker_connections  1024;
  }
  http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] &quot;$request&quot; '
                      '$status $body_bytes_sent &quot;$http_referer&quot; '
                      '&quot;$http_user_agent&quot; &quot;$http_x_forwarded_for&quot;';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    keepalive_timeout  65;
    server {
      listen       8080;
      location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html;
      }
    }
  }
  </code></pre>
  <p><strong>Ingress Prod</strong>: (kept only the necessary bits for brevity sakes),</p>
  <pre><code>apiVersion: extensions/v1beta1
  kind: Ingress
  metadata:
    annotations:
      kubernetes.io/ingress.class: nginx
      nginx.ingress.kubernetes.io/force-ssl-redirect: &quot;true&quot;
      nginx.ingress.kubernetes.io/rewrite-target: /$2
      nginx.ingress.kubernetes.io/ssl-redirect: &quot;true&quot;
    labels:
      app: &lt;my-app&gt;
      app.kubernetes.io/instance: &lt;my-instance&gt;
    name: &lt;my-name&gt;
    namespace: &lt;my-namespace&gt;
  spec:
    rules:
      - host: &lt;my-host&gt;
        http:
          paths:
            - backend:
                serviceName: livspace-hub
                servicePort: 80
              path: /
  
  </code></pre>
  <p><strong>Ingress local</strong>:</p>
  <pre><code>apiVersion: networking.k8s.io/v1
  kind: Ingress
  metadata:
    name: &lt;my-app-name&gt;
    annotations:
      nginx.ingress.kubernetes.io/rewrite-target: /
  spec:
    rules:
    - host: &lt;my-host&gt;
      http:
        paths:
        - path: /
          pathType: Prefix
          backend:
            service:
              name: hub-service
              port:
                number: 9090
  </code></pre>
  <p>The error I get is,</p>
  <blockquote>
  <p>Uncaught SyntaxError: Unexpected token '&lt;' chunk-vendors.a727ce10.js:1</p>
  <p>Uncaught SyntaxError: Unexpected token '&lt;' app.a68a0468.js:1</p>
  </blockquote>
  <p>And the content-type for both these resources in the network tab is <code>text/html</code>.</p>
  <p><strong>Edit 1:</strong></p>
  <p>This is what my folder looks like after deployment,</p>
  <pre><code>/usr/share/nginx/html # ls
  50x.html assets css  favicon.ico fonts index.html  js  styles
  </code></pre>
  <p>The path for my js file is,</p>
  <p><code>https://&lt;my-domain&gt;/js/app.a68a0468.js</code></p>
  <p><strong>Edit 2:</strong></p>
  <p>Here are the logs from my local vs deployed application.</p>
  <p><strong>Local</strong>:</p>
  <blockquote>
  <p> - - [12/Apr/2021:10:38:18 +0000] &quot;GET / HTTP/1.1&quot; 200 3213 &quot;-&quot; &quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36 Edg/89.0.774.75&quot;</p>
  <p> - - [12/Apr/2021:10:38:18 +0000] &quot;GET /css/milestone.1c126aff.css HTTP/1.1&quot; 200 1139 &quot;http:///&quot; &quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36 Edg/89.0.774.75&quot;</p>
  <p> - - [12/Apr/2021:10:38:18 +0000] &quot;GET /css/catalogue.5794c500.css HTTP/1.1&quot; 200 156 &quot;http:///&quot; &quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36 Edg/89.0.774.75&quot;</p>
  </blockquote>
  <p><strong>Deployed</strong>:</p>
  <blockquote>
  <p> - - [12/Apr/2021:12:46:28 +0000] &quot;GET / HTTP/1.1&quot; 200 3213 &quot;https:///&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36 Edg/89.0.774.54&quot;</p>
  <p> - - [12/Apr/2021:12:46:28 +0000] &quot;GET / HTTP/1.1&quot; 200 3213 &quot;https:///&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36 Edg/89.0.774.54&quot;</p>
  <p> - - [12/Apr/2021:12:46:28 +0000] &quot;GET / HTTP/1.1&quot; 200 3213 &quot;https:///&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36 Edg/89.0.774.54&quot;</p>
  <p> - - [12/Apr/2021:12:46:28 +0000] &quot;GET / HTTP/1.1&quot; 200 3213 &quot;https:///&quot; &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36 Edg/89.0.774.54&quot;</p>
  </blockquote>
  <p>My local instance is also run via docker/docker-compose, so the setup is essentially the same.</p>
  <p>As you can see, my local setup logs show requests for specific files - <code>GET /&lt;filename&gt;</code> - whereas the deployed instance shows only logs for <code>GET /</code>.</p>