Trying to return custom 404 page instead nginx 404 default page

Question

I have SPA made with Vue.js.

I handle 404 at client side this way:

//at the end of router
{
  path: '/404',
  name: 'not-found',
  component: () => import(...)
},
{
  path: '*',
  redirect: '/404'
}

Problem: when I'm trying to access some unexisting page on my dev environment, I got nginx default 404 page instead my Vue page.

Parts of Nginx config:

server {
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    //ssl config managed by Certbot
}

server {
    if ($host = <...>) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name <...>;
    listen 80;
}
server {
    if ($host = <...>) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name <...>;
    listen 80;
    return 404; # managed by Certbot
}

Locally I don't have such problems, my local config also has try_files $uri =404; row. What's wrong?

I've tried

location / {
    try_files $uri =404;
}

instead

location / {
    try_files $uri $uri/ =404;
}

, didn't helped.

Tarasovych · Accepted Answer · 2019-01-29 10:31:29Z

1

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

answered Jan 29, 2019 at 10:31

Tarasovych

2,3983 gold badges23 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexis Dalai Waldo Jiménez · Accepted Answer · 2022-09-21 05:42:58Z

0

Try this:

server{    
 error_page 404 $scheme://$host/404;
}

answered Sep 21, 2022 at 5:42

Alexis Dalai Waldo Jiménez

3403 silver badges9 bronze badges

Collectives™ on Stack Overflow

Trying to return custom 404 page instead nginx 404 default page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related