CODEWITHSUNDEEP
vue.jsnginx
temp
temp

Reputation: 571

404 after refreshing page vue/nginx

I looked for this error and just found solutions using history mode in vue and redirects in nginx location block. I did this like:

nginx:

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name tests.test;
        return 302 https://$server_name$request_uri;
}
server{
        # SSL configuration
        listen 443 ssl default_server;
        listen [::]:443 ssl default_server;

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

        include snippets/self-signed.conf;
        include snippets/ssl-params.conf;

        location / {
          root /var/www/client/pvapp-client/dist;
          index index.html index.htm;
          try_files $uri $uri/ /index.html;
          ...

And in my vue router:

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [{
      path: '/',
      name: 'home',
      component: Home
    },
     {
      path: '/app',
      name: 'app',
      component: Application
    },
    {
      path: '/settings',
      name: 'settings',
      component: Settings
    },

    // otherwise redirect to home
    {
      path: '*',
      redirect: '/'
    }
  ]
})

And I still get the error from the server trying to serve a non existing route.

The vue error log is also warning:

"/var/www/client/pvapp-client/dist/app" failed (2: No such file or directory)

Upvotes: 0

Views: 980

Answers (1)

temp
temp

Reputation: 571

Okay, I got it. Somehow the GET part of this setting has made the problems. Don't know why tho. Just comment it and everything worked fine:

if ($request_method = 'OPTIONS') {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

  # Custom headers and headers various browsers *should* be OK with but aren't

  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
  add_header 'Access-Control-Max-Age' 1728000;
  add_header 'Content-Type' 'text/plain; charset=utf-8';
  add_header 'Content-Length' 0;
 return 204;
   }

if ($request_method = 'POST') {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

   }

#if ($request_method = 'GET') {
#  add_header 'Access-Control-Allow-Origin' '*';
#  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-#Modified-Since,Cache-Control,Content-Type,Range';
#  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
#}

Upvotes: 0

Related Questions