AngularJS rimuove # ed ha un errore quando si aggiorna la pagina

Ho un'applicazione web AngularJS e l'avvio con Tomcat 7. Utilizzando $locationProvider.html5Mode(true) tolgo cancelletto '#' dal urlAngularJS rimuove # ed ha un errore quando si aggiorna la pagina

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

Ma ora, quando mi aggiornare localhost:8080/App/login ho 404 error. Come configurare Tomcat7 per l'aggiornamento 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>

fonte

2015-10-01 TestUser

E 'perché quando si esegue una ricarica completa si invia sempre un una richiesta al server con l'URL corrente. Poiché Angular non è ancora stato caricato, non può gestire il percorso e il server non sa nulla su quali route esistono in angolare e non

Senza html5mode Angular utilizza URL frammentati del tipo www.example.com/#/page. # è stato originariamente utilizzato per i collegamenti di ancoraggio, quindi per convenzione la parte frammento dell'URL è completamente ignorata dal server. Al server la richiesta di cui sopra sarebbe uguale a solo www.example.com/, che probabilmente è dove si trova index.html. Quindi ricaricando la tua pagina in questo caso otterrai il tuo index.html, che caricherà Angular, che a sua volta gestirà la parte frammento dell'URL (#/page).

Con html5mode, tuttavia, il frammento è nascosto e l'URL sembra un normale URL, www.example.com/page. Ma quando ricarichi la pagina il server non recupera il frammento in modo che cerchi di trovare qualunque cosa sia servita in/page, che probabilmente non è nulla. Dando un 404, Angular non può caricare dal momento che index.html non è caricato, e hai una pagina rotta.

Il modo normale per risolvere questo problema è far servire index.html al server in tutti gli URL che non corrispondono a un asset statico (o al pattern di uno). Quindi se chiedi di dire un'immagine lo troverà e lo restituirà ok, ma se richiedi/pagina (e non esiste come asset statico) restituisce index.html. Quindi inizierà Angular, leggere l'url e attivare la rotta corretta.

Ho fatto solo questo in nginx quindi non so come Tomcat lo farebbe, ma il principio dovrebbe essere lo stesso.

fonte

2015-10-01 12:21:51

Potresti aiutare con la soluzione di nginx ?? –

È passato un po 'di tempo da quando l'ho fatto l'ultima volta, ma ci sono molti esempi con esempi come questo: https://gist.github.com/zdwolfe/6721115 In aggiunta a quello che mostrano, probabilmente vorrai un luogo per qualcosa come/statico che serve immagini o file javascript. –

1) AngularJS

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

2) lato server, appena messo .htaccess all'interno della vostra cartella principale e incolla questo

ewriteEngine On 
Options FollowSymLinks 

RewriteBase/

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

Saluti ....

fonte

2015-10-23 21:00:16

Erik Honn dà una buona spiegazione della logica. Ecco come ho risolto utilizzando Jersey e Tomcat 7 con URLRewriteFilter di Tucky https://github.com/paultuckey/urlrewritefilter

Aggiungi dipendenza utilizzando Maven o scaricare barattolo.

<dependency> 
    <groupId>org.tuckey</groupId> 
    <artifactId>urlrewritefilter</artifactId> 
    <version>4.0.3</version> 
</dependency>

Aggiungi mappature di filtro per il file web.xml si trova nella directory WEB-INF. Questo dovrebbe essere all'interno del tag web-app.

<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>

creare un file in WEB-INF chiamato urlrewrite.xml e aggiungere un volo alternativo a 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>

Non dimenticare di rilanciare in modo che l'XML è configurato. Sarebbe bello se qualcuno conoscesse un modo per raggruppare le rotte per andare a index.html piuttosto che dover impostare regole individuali.

fonte

2015-11-28 20:01:55 mhatch

1) Scarica URLRewriteFilter-4.0.3.jar

2) Creare la cartella WEB-INF nella directory principale in cui è presente index.html.

3) Creare cartella lib in WEB-INF & inserire il file jar scaricato in esso.

4) Creare il file web.xml in WEB-INF. Inserisci il seguente codice.

<?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) Creare il file urlrewrite.xml WEB-INF

put seguente codice in esso

<?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>

Questo sta usando URLRewriteFilter Tomcat 7 & di Tucky https://github.com/paultuckey/urlrewritefilter

@mhatch. Per Budle i percorsi per tutti vanno a index.html, si può provare questo regola di riscrittura:

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

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

questo ha funzionato per me.

fonte

2016-11-30 07:43:22 Sneha

Se si desidera rimuovere l'hash (#), è necessario utilizzare la funzione di riscrittura nel server per servire lo index.html per tutti i percorsi. In caso contrario, riceverai sempre l'errore 404. Significa che è possibile reindirizzare lo 404 a index.html.

Apache: aggiungere una regola di riscrittura per il file .htaccess come mostrato qui:

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: uso try_files, come descritto nel modello di front controller Web Apps, modificato per servire index.html:

try_files $uri $uri/ /index.html;

IIS: aggiungere una regola di riscrittura a web.config, simile a quella mostrata qui:

<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>

In Tomcat, è possibile aggiungere in 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>

Dopo reindirizzare il percorso web per index.html, l'HTML5 Storia API verrà utilizzato in Angular JS per controllare il percorso web.Il nostro compito principale qui è lasciare che sia index.html chiamato nel server.

fonte

2017-03-20 04:18:10

Basta scrivere questo 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]

io non sono un index.html ho index.php Così ho scritto index.php invece di index.html

Cheers!

fonte

2017-03-21 07:00:15

Recentemente ho trovato una soluzione a questo problema che non prevede il passaggio ad Apache2 con un file .htaccess.

in 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>

Quindi creare un nuovo file in WebContent chiamato riscrittura-404.jsp:

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

Questo farà sì che i file esistenti in WebContent per essere servito come al solito, e tutte le richieste che normalmente restituirebbero un errore 404 per restituire index.html invece con un codice di risposta 200 (OK).

fonte

2017-05-11 18:19:15 krispy

AngularJS rimuove # ed ha un errore quando si aggiorna la pagina

risposta

Problemi correlati