title: Can't directly access url with nginx. Must use button to navigate to other page
body: <p>I'm having this weird issue where I can only navigate to http://localhost/ for my application. If I try to type in localhost/login into the search bar I get a 404 error. The only way I'm able to reach /login is if I use a button to get there (we use this.$router.push(&quot;/login&quot;). The application is a springboot backend with a Quasar/VueJS frontend. From what my team has told me it works when the application is run without docker and nginx but it fails now that its been dockerized. I should also mention that everything in the backend is reachable as well. All services are running in their own docker container. I've attached my nginx.conf as well as some other code snippets. Thanks :)</p>
  <p>nginx.conf:</p>
  <pre><code>server{
      listen 80;
      listen [::]:80;
  
      ## FRONTEND ROUTE ##
      location / {
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_pass http://quasar:80/; #pass to frontend
      }
  
      ## BACKEND ROUTE ##
      location /api/ {
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_pass http://springboot:8181/; #pass to backend
      }
  }
  </code></pre>
  <p>routes.js:</p>
  <pre><code>const routes = [
    {
      path: &quot;/&quot;,
      component: () =&gt; import(&quot;layouts/MainLayout.vue&quot;),
      // children: [{ path: &quot;&quot;, component: () =&gt; import(&quot;pages/Index.vue&quot;) }],
    },
  
    {
      path: &quot;/register&quot;,
      component: () =&gt; import(&quot;layouts/OutsideLayout.vue&quot;),
      children: [{ path: &quot;&quot;, component: () =&gt; import(&quot;pages/Register.vue&quot;) }],
    },
  
    {
      path: &quot;/login&quot;,
      component: () =&gt; import(&quot;layouts/OutsideLayout.vue&quot;),
      children: [{ path: &quot;&quot;, component: () =&gt; import(&quot;pages/Login.vue&quot;) }],
    },
  
    {
      path: &quot;/profile&quot;,
      component: () =&gt; import(&quot;layouts/ProfileLayout.vue&quot;),
      children: [{ path: &quot;&quot;, component: () =&gt; import(&quot;pages/Profile.vue&quot;) }],
    },
  
    // Always leave this as last one,
    // but you can also remove it
    {
      path: &quot;*&quot;,
      component: () =&gt; import(&quot;pages/Error404.vue&quot;),
    },
  ];
  
  export default routes;
  </code></pre>
  <p>docker-compose:</p>
  <pre><code>version: &quot;3.7&quot;
  services:
  
    springboot:
      image: sizzle/spring-boot-backend:latest
      restart: always
      ports: 
        - &quot;8181:8181&quot;
      environment: 
        - SPRING_DATA_MONGODB_host=mongodb-dev:27017
      depends_on: 
        - mongodb-dev
  
    nginx:
      image: sizzle/nginx_reverse_proxy:latest
      restart: always
      ports: 
        - &quot;80:80&quot;
      depends_on: 
        - quasar
      
    quasar:
      image: sizzle/quasar_fe:latest
      restart: always
      ports:
        - &quot;8080:80&quot;
      depends_on: 
        - springboot
  
    mongodb-dev:
      image: mongo
      container_name: mongodb-database
      environment: 
        MONGO_INITDB_DATABASE: test # database name to give
        MONGO_INITDB_ROOT_USERNAME: root
        MONGO_INITDB_ROOT_PASSWORD: root
      
      volumes: 
        - ./mongo-volume:/data/db
      ports: 
      - &quot;27017-27019:27017-27019&quot;
  </code></pre>