AngularJS usuwa # i wyświetla błąd podczas odświeżania strony

Mam aplikację internetową AngularJS i uruchamiam ją pod Tomcat 7. Korzystanie $locationProvider.html5Mode(true) usunąć hash '#' z urlAngularJS usuwa # i wyświetla błąd podczas odświeżania strony

localhost:8080/App/#/login -> localhost:8080/App/login

Ale teraz, gdy odświeżam localhost:8080/App/login mam 404 error. Jak skonfigurować odświeżanie Tomcat7 dla localhost:8080/App/login?

app.config:

$urlRouterProvider.otherwise("/login/"); 

$stateProvider 
     .state('home', { 
      abstract: true, 
      templateUrl: 'dist/view/home.html', 
      controller: 'HomeCtrl' 
     }); 

$locationProvider.html5Mode(true);

index.html:

<head> 
    <meta charset="utf-8"> 
    <script> 
     document.write('<base href="' + document.location + '" />'); 
    </script> 
</head>

Źródło

2015-10-01 TestUser

To dlatego, kiedy wykonujesz pełną reload zawsze wysyła żądanie do serwera z aktualnym adresem URL. Ponieważ Angular nie został jeszcze załadowany, nie może obsłużyć trasy, a serwer nie wie nic o tym, jakie trasy istnieją w kanciastym, a nie w kodzie HTML. Bez html5mode Angular wykorzystuje pofragmentowane adresy URL typu www.example.com/#/page. # było pierwotnie używane dla anchor-links, więc zgodnie z konwencją część fragmentu adresu URL jest całkowicie ignorowana przez serwer. Do serwera, który powyżej żądania byłby taki sam, jak tylko www.example.com/, prawdopodobnie tam, gdzie znajduje się index.html. W takim przypadku ponowne załadowanie strony spowoduje pobranie pliku index.html, który załaduje Angular, który z kolei będzie obsługiwał część fragmentu adresu URL (#/page).

Z html5mode jednak fragment jest ukryty, a adres URL wygląda jak normalny URL, www.example.com/page. Ale po przeładowaniu strony serwer nie otrzymuje fragmentu, więc próbuje znaleźć to, co jest podawane w/page, co prawdopodobnie jest niczym. Dając ci 404, Angular nie może załadować, ponieważ index.html nie jest załadowany i masz zepsutą stronę.

Najczęstszym sposobem na naprawienie tego jest serwer serwujący plik index.html pod wszystkimi adresami URL, które nie pasują do zasobu statycznego (lub wzorca). Więc jeśli poprosisz o powiedzenie obrazu, to go znajdzie i zwróci, ale jeśli zażądasz/strony (i nie istnieje jako zasób statyczny), to zwraca index.html. Następnie uruchomi się Angular, odczyta adres URL i uruchomi prawidłową trasę.

Zrobiłem to tylko w Nginx, więc nie wiem, jak Tomcat by to zrobił, ale zasada powinna być taka sama.

Źródło

2015-10-01 12:21:51

Czy możesz pomóc w rozwiązaniu nginx? –

Minęło trochę czasu, odkąd zrobiłem to ostatnie, ale jest kilka przykładów z przykładami, takimi jak ten: https://gist.github.com/zdwolfe/6721115 Oprócz tego, co pokazują, prawdopodobnie potrzebujesz lokalizacji dla czegoś like/static, który obsługuje obrazy lub pliki javascript. –

1) angularjs

$routeProvider 
    .when('/path', { 
    templateUrl: 'path.html', 
    }); 
$locationProvider 
    .html5Mode(true);

2) stronie serwera Wystarczy umieścić .htaccess wewnątrz głównego folderu i wklej ten

ewriteEngine On 
Options FollowSymLinks 

RewriteBase/

RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule ^(.*)$ /#/$1 [L]

Cheers ....

Źródło

2015-10-23 21:00:16

Erik Honn daje dobre wyjaśnienie tej logiki. Oto jak rozwiązać go za pomocą Jersey i Tomcat 7 z urlrewritefilter Tucky za https://github.com/paultuckey/urlrewritefilter

Dodaj zależność przy użyciu Maven lub pobrać jar.

Dodaj mapowania filtrów do pliku web.xml znajdującego się w katalogu WEB-INF. Powinno to być w tagu aplikacji internetowej.

<filter> 
    <filter-name>UrlRewriteFilter</filter-name> 
    <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class> 
</filter> 
<filter-mapping> 
    <filter-name>UrlRewriteFilter</filter-name> 
    <url-pattern>/*</url-pattern> 
    <dispatcher>REQUEST</dispatcher> 
    <dispatcher>FORWARD</dispatcher> 
</filter-mapping>

Utwórz plik w katalogu WEB-INF zwany urlrewrite.xml i dodać przekierowanie index.html

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 4.0//EN" 
"http://www.tuckey.org/res/dtds/urlrewrite4.0.dtd"> 

<!-- 

Configuration file for UrlRewriteFilter 
http://www.tuckey.org/urlrewrite/ 

--> 
<urlrewrite> 

<rule> 
<from>^/titles$</from> 
<to>index.html</to> 
</rule> 

<rule> 
<from>^/authors$</from> 
<to>index.html</to> 
</rule> 

<rule> 
<from>^/courses$</from> 
<to>index.html</to> 
</rule> 

<rule> 
<from>^/account$</from> 
<to>index.html</to> 
</rule> 

</urlrewrite>

Nie zapomnij wznowienie tak, że XML jest skonfigurowana. Byłoby wspaniale, gdyby ktoś wiedział, w jaki sposób połączyć trasy z wszystkimi, aby przejść do index.html, zamiast ustawiać poszczególne reguły.

Źródło

2015-11-28 20:01:55 mhatch

1) Pobierz urlrewritefilter-4.0.3.jar

2) Utwórz folder, WEB-INF w katalogu głównego, w którym obecny jest index.html.

3) Utwórz folder lib w WEB-INF & włóż pobrany plik jar do niego.

4) Utwórz plik web.xml w WEB-INF. Wstaw następujący kod.

<?xml version="1.0" encoding="ISO-8859-1"?> 
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee     http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata complete="true"> 
<display-name>Welcome to Tomcat</display-name><description>Welcome to Tomcat</description><welcome-file-list><welcome-file>index.html</welcome-file></welcome-file-list> 
<filter> 
<filter-name>UrlRewriteFilter</filter-name> 
<filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class></filter><filter-mapping><filter-name>UrlRewriteFilter</filter-name><urlpattern>/*</url-pattern><dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher></filter-mapping></web-app>

5) Tworzenie pliku urlrewrite.xml WEB-INF

put poniższy kod na to

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE urlrewrite PUBLIC-//tuckey.org//DTD UrlRewrite 3.2//EN" 
    "http://tuckey.org/res/dtds/urlrewrite3.2.dtd"><urlrewrite> 

<rule enabled="true"> 
    <from>/[0-9_-a-zA-Z\/]+$</from> 

    <to>/%{context-path}/</to> 
</rule>/urlrewrite>

ten korzysta urlrewritefilter Tomcat 7 & Tucky za https://github.com/paultuckey/urlrewritefilter

@mhatch. Aby Budle trasy do wszystkich przejść do index.html, możesz spróbować tej reguły przepisywania:

<rule enabled="true"> 
    <from>/[0-9_-a-zA-Z\/]+$</from> 

    <to>/%{context-path}/</to>

Ten pracował dla mnie.

Źródło

2016-11-30 07:43:22 Sneha

Jeśli chcesz usunąć skrót (#), musisz użyć funkcji przepisywania na serwerze, aby obsłużyć całą ścieżkę index.html. Jeśli nie, zawsze otrzymasz błąd 404. To znaczy, że możesz przekierować 404 na index.html.

Apache: dodać regułę przepisywania do pliku .htaccess jak pokazują tutaj:

RewriteEngine On 
# If an existing asset or directory is requested go to it as it is 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule^- [L] 
# If the requested resource doesn't exist, use index.html 
RewriteRule^/index.html

nginx: użytku try_files, jak opisano w Front Controller Wzorzec Web Apps, zmodyfikowany, aby służyć index.html:

try_files $uri $uri/ /index.html;

IIS: dodaj regułę przepisywania do web.config, podobny do pokazanego tutaj:

<system .webserver=""> 
    <rewrite> 
    <rules> 
     <rule name="Angular Routes" stopprocessing="true"> 
     <match url=".*"> 
     <conditions logicalgrouping="MatchAll"> 
      <add input="{REQUEST_FILENAME}" matchtype="IsFile" negate="true"> 
      <add input="{REQUEST_FILENAME}" matchtype="IsDirectory" negate="true"> 
     </add></add></conditions> 
     <action type="Rewrite" url="/"> 
     </action></match></rule> 
    </rules> 
    </rewrite> 
</system>

W kocur, możesz dodać go do web.xml:

<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> 
    <error-page> 
     <error-code>404</error-code> 
     <location>/</location> 
    </error-page> 
</web-app>

Po przekierować ścieżki internetowej do index.html, History API HTML5 będzie używany w Angular JS do kontrolowania trasy internetowej.Naszym głównym zadaniem jest po prostu pozwolić na wywołanie index.html na serwerze.

Źródło

2017-03-20 04:18:10

Wystarczy napisać to w htaccess

RewriteEngine on 
# Don't rewrite files or directories 
RewriteCond %{REQUEST_FILENAME} -f [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule^- [L] 
# Rewrite everything else to index.html to allow html5 state links 
RewriteRule^index.php [L]

dont mieć index.html mam index.php więc napisałem index.php zamiast index.html

Cheers!

Źródło

2017-03-21 07:00:15

Niedawno znalazłem rozwiązanie tego problemu, które nie wymaga przełączania na serwer Apache2 z plikiem .htaccess.

W web.xml:

<welcome-file-list> 
    <welcome-file>index.html</welcome-file> 
</welcome-file-list> 
<error-page> 
    <error-code>404</error-code> 
    <location>/rewrite-404.jsp</location> 
</error-page>

Następnie należy utworzyć nowy plik w WebContent nazywa przepisywania-404.jsp:

<% response.setStatus(HttpServletResponse.SC_OK); %> 
<%@ include file="index.html" %>

Spowoduje istniejące pliki w WebContent aby Mu służono, jak zwykle, oraz wszystkie żądania, które normalnie zwrócą błąd 404 w celu zwrócenia index.html zamiast z 200 (OK) kodem odpowiedzi.

Źródło

2017-05-11 18:19:15 krispy

AngularJS usuwa # i wyświetla błąd podczas odświeżania strony

Odpowiedz

Powiązane problemy