Why does this Nginx config result in “rewrite or internal redirection cycle”

API REST: Flask
APP: Vue Js made with vue-cli
NGINX as web server

Fast note of what happened with the error  “rewrite or internal redirection cycle”. I have to say that I've been dealing with this for hours.

THE STORY
My vue-router

export const router = new Router({
base: '/myapp/',
mode: 'history',
routes: [
  {
path: '/',
name: 'home',
component: Login
  },
  {
path: '/login',
name: 'login',
component: Login
  },
  {
path: '/foo',
name: 'foo',
component: Foo
  },
  {
path: '*',
component: NotFound
  },

]
  });

So I built my app with the command

npm run build 

Then i copy and paste the files of dist in a subdirectory let's say "myapp" in my ngnix folder

/var/www/html/myapp 

after that I went to file /etc/nginx/sites-enabled/default and edited with this lines

server {

    listen 0.0.0.0:80;  
    index index.html index.htm;

    server_name localhost;


    location /myapp {
        try_files $uri $uri/ /index.html;
    }
}

and then when I reload or went to the route directly I got and annoying 500 error. At the beginnig I thought the router was doing something wrong but after many hours of research I found that was nginx who was being the bad guy so i changed


try_files $uri $uri/ /index.html;

to

try_files $uri $uri/ /index.html =404;

now everything is working fine. Do no forget to reload nginx


This will make sure that when even index.html is not there you get a 404 and not a internal redirection cycle

Currently what is happening is try files /index.html /index.html/ /index.html and so on...

Now if /index.html doesn't exist then your fallback option (last parameter for try_file) is /index.html. This creates internal redirection cycle.


Thanks for reading.