Как обработать запрос ошибки 404 в vuejs SPA с сервером nginx - PullRequest
Новая
       54

Как обработать запрос ошибки 404 в vuejs SPA с сервером nginx

0 голосов
/ 24 сентября 2018

Я настроил SPA vue-cli версии 3 таким образом, чтобы любые запросы, не найденные в моем файле rout.js, по умолчанию отображались в моем представлении 404, как показано в официальной документации :

* 1004.* Вставлено в конец файла routes.js: 
{ // catches 404 errors
  path: '*',
  name: '404',
  component: () => import(/* webpackChunkName: "NotFoundComponent" */ './views/NotFoundComponent.vue'),
},

Вставлено в файл конфигурации nginx: 

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

Это успешно предупреждает пользователя о том, что запрашиваемая страница не существует.

Мой вопрос:

Я хотел бы, чтобы компонент ошибки 404 возвратил заголовок ответа 404 (в настоящее время он возвращает код состояния 200), а также записал эту ошибку вФайл nginx error.log.Я полагаю, что это возможно только при использовании конфигурации nginx.Кто-нибудь достиг этой цели?

Я заметил, что эта проблема решена на следующей странице в официальной документации vue-cli, но она касается только серверов экспресс-узлов, а не nginx: https://router.vuejs.org/guide/essentials/history-mode.html#caveat

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Я решил эту простую задачу, вырвавшись из экосистемы Vue, иначе она не будет работать или потребует больших усилий.

Создайте следующий маршрут в маршрутизаторе Vue: 

{
  path: '*',
  name: 'PageNotFound',
  component: PageNotFound
}

Компонент PageNotFound должен иметь следующий код: 

<script>
export default {
  name: 'PageNotFound',
  created() {
    window.location.href = "/404/"
  }
}
</script>

Конфигурация nginx должна возвращать 404 при получении /404/ маршрута: 

server {
    ...
    location ~ ^/404/$ {
        return 404;
    }
    ...
}

Я не думаю,это будет работать в среде рендеринга на стороне сервера.В таком случае вам может понадобиться поместить оператор, содержащий window.location.href, в метод mounted.

0 голосов
/ 24 сентября 2018

Я думаю, что это похоже на решение Node - вы должны повторить все ваши маршруты в конфигурации nginx, чтобы правильно вернуть код состояния 404, основная идея состоит в том, что вы должны использовать модификатор «равно» в местах и ​​определить error_page, чтобы вернуть то же самоеindex.html файл, но с кодом состояния 404, пример: 

server {
    listen       80;
    server_name  localhost;
    root /my/dir/with/app
    error_page  404 /index.html;

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

    location = /books {
        try_files $uri $uri/ /index.html;
    }

    # example nested page
    location = /books/authors {
        try_files $uri $uri/ /index.html;
    }

    # example dynamic route to access book by id
    location ~ /books/\d+$ {
        try_files $uri $uri/ /index.html;
    }
}

Возможно, этот конфиг можно упростить или улучшить, потому что я не очень хорош в конфигурации nginx, но он работает.

...