Как исправить ошибку Nginx 404 в приложениях Angular 2+ с помощью PathLocationStrategy - PullRequest
Новая
       33

Как исправить ошибку Nginx 404 в приложениях Angular 2+ с помощью PathLocationStrategy

0 голосов
/ 05 февраля 2020

Справочная информация: Я унаследовал приложение Angular 7, которое использовало HashLocationStrategy и обслуживается Nginx в контейнере Docker. Я перехожу с нашей собственной локальной аутентификации на провайдера идентификации для всей компании. Это потребовало от меня перехода с HashLocationStrategy на PathLocationStrategy, как описано в этом вопросе .

Теперь я пытаюсь развернуть приложение в реальной серверной среде, и я обнаружил 404 Not Found ошибка, возвращаемая Nginx, либо когда путь вводится непосредственно в браузере, либо когда мое приложение перенаправляется на обратный вызов после входа в систему.

I думаю, проблема что мой файл frontend.conf не настроен правильно для PathLocationStrategy / html5mode, потому что, если я ввожу только имя хоста сервера, страница index. html обслуживается, мое приложение запускается, и оно успешно перенаправляет меня на / login, что где все пути перенаправляются, если пользователь не вошел в систему. Однако, если я вручную ввожу в браузер / логин, я получаю ошибку 404. Кроме того, если я вхожу в систему с использованием нового поставщика идентификаторов, поставщик идентификаторов перенаправляет мое приложение в / login-redirect-callback? Code = XXXX ..., и это перенаправление генерирует ошибку 404, поскольку сервер Nginx может ' Не могу найти файл с таким именем.

Пожалуйста, будьте добры и простите, если вопрос и решение уже существуют. Я посмотрел на многие решения Stack Overflow и другие сайты для этого, и ничего, что я пробовал, до сих пор не работало. Я признаю, что я относительно новичок в настройке Nginx и Docker, поэтому, возможно, я просто упускаю из виду нечто очевидное.

Подробности:

Мой индекс. html содержит: <base href="/">

Мой frontend.conf содержит: 

  server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    root   /usr/share/nginx/html;
    expires $expires;
    charset UTF-8; 

    # Main
    location / {
      set $cors "true";
      if ($http_origin ~* (http:\/\/d\.MYDOMAINHERE\.com\S*)$) {
        set $cors "true";
      }

      if ($request_method = 'OPTIONS') {
        set $cors "${cors}options";
      }

      if ($request_method = 'GET') {
        set $cors "${cors}get";
      }
      if ($request_method = 'POST') {
        set $cors "${cors}post";
      }

      if ($cors = "trueget") {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
      }

      if ($cors = "truepost") {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
      }

      if ($cors = "trueoptions") {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
      }

      try_files $uri$args $uri $uri$args/ $uri/ /index.html =404; # This will allow you to refresh page in your angular app. Which will not give error 404.    
    }

Спасибо за любой совет.

...