CODEWITHSUNDEEP
dockervue.jsnginxnginx-reverse-proxy
eilwa
eilwa

Reputation: 11

Vue Router Returns 404 When Refreshing Page in Docker + Nginx Setup

I have a Vue.js application running inside a Docker container with Vue Router set to history mode. The app works fine when navigating through links, but when I refresh the page or visit a route directly, I get a 404 Not Found error.

I have a Vue.js application running inside a Docker container with Vue Router set to history mode. The app works fine when navigating through links, but when I refresh the page or visit a route directly, I get a 404 Not Found error.

Setup Details:

Current Nginx Configuration

location /dev/myapp/ {
    proxy_pass http://localhost:6991/;
    proxy_set_header Host $host;
    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;
}

Upvotes: 0

Views: 20

Answers (1)

imhvost
imhvost

Reputation: 10002

You probably have an SPA, so you need to redirect all requests to index.html.
Try adding to your nginx configuration:

location /dev/myapp/ {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri /index.html;
}

Upvotes: 1

Related Questions