Das Neuladen der Seite führt zu einer falschen GET-Anforderung im AngularJS HTML5-Modus

Ich möchte den HTML5-Modus für meine App aktivieren. Ich habe den folgenden Code für die Konfiguration eingegeben, wie hier gezeigt :

return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix = '!';

    $routeProvider.when('/', {
        templateUrl: '/views/index.html',
        controller: 'indexCtrl'
    });
    $routeProvider.when('/about',{
        templateUrl: '/views/about.html',
        controller: 'AboutCtrl'
    });

Wie Sie sehen können, habe ich das verwendet $locationProvider.html5modeund alle meine Links am geändert ng-href, um das auszuschließen /#/.

Das Problem

Im Moment kann ich auf localhost:9000/die Indexseite gehen und zu den anderen Seiten wie navigieren localhost:9000/about.

Das Problem tritt jedoch auf, wenn ich die localhost:9000/aboutSeite aktualisiere . Ich erhalte folgende Ausgabe:Cannot GET /about

Wenn ich mir die Netzwerkaufrufe ansehe:

Request URL:localhost:9000/about
Request Method:GET

Wenn ich zum ersten Mal gehe localhost:9000/und dann auf eine Schaltfläche klicke, die zu navigiert, /abouterhalte ich:

Request URL:http://localhost:9000/views/about.html

Das macht die Seite perfekt.

Wie kann ich Angular aktivieren, um beim Aktualisieren die richtige Seite zu erhalten?

Aus den eckigen Dokumenten

Serverseite
Wenn Sie diesen Modus verwenden, müssen Sie die URL auf der Serverseite neu schreiben. Grundsätzlich müssen Sie alle Links zum Einstiegspunkt Ihrer Anwendung neu schreiben (z. B. index.html).

Der Grund dafür ist, dass /aboutder Browser beim ersten Besuch der Seite ( ), z. B. nach einer Aktualisierung, nicht wissen kann, dass es sich nicht um eine echte URL handelt. Daher wird diese fortgeführt und geladen. Wenn Sie jedoch zuerst die Stammseite und den gesamten Javascript-Code geladen haben, können Sie beim Navigieren zu /aboutAngular dort hineinkommen, bevor der Browser versucht, den Server zu erreichen und entsprechend zu behandeln

Es müssen nur wenige Dinge eingerichtet werden, damit Ihr Link im Browser so aussieht, http://yourdomain.com/pathund dies ist Ihre eckige Konfigurations- + Serverseite

1) AngularJS

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

2) Server-Seite, legen .htaccessSie es einfach in Ihrem Stammordner ab und fügen Sie diesen ein

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Weitere interessante Informationen zum HTML5-Modus in AngularJS und zur Konfiguration, die für verschiedene Umgebungen erforderlich ist: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode Auch diese Frage kann Ihnen helfen, $ location / umschalten zwischen html5 und Hashbang-Modus / Link-Umschreiben

Ich hatte ein ähnliches Problem und löste es durch:

• Verwendung <base href="https://stackoverflow.com/index.html">auf der Indexseite

• Verwenden Sie eine Catch-All-Route-Middleware in meinem Knoten / Express-Server wie folgt (setzen Sie sie hinter den Router):

app.use(function(req, res) {
    res.sendfile(__dirname + '/Public/index.html');
});

Ich denke, das sollte dich zum Laufen bringen.

Wenn Sie einen Apache-Server verwenden, möchten Sie möglicherweise Ihre Links mod_rewrite. Es ist nicht schwer zu tun. Nur ein paar Änderungen in den Konfigurationsdateien.

Alles, was vorausgesetzt wird, dass Sie html5mode für anglejs aktiviert haben. Jetzt. Beachten Sie, dass in Winkel 1.2 das Deklarieren einer Basis-URL eigentlich nicht mehr empfohlen wird.

Lösung für BrowserSync und Gulp.

Von https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643

Erste Installation connect-history-api-fallback:

npm --save-dev install connect-history-api-fallback

Dann füge es deiner gulpfile.js hinzu:

var historyApiFallback = require('connect-history-api-fallback');

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "app",
      middleware: [ historyApiFallback() ]
    }
  });
});

Sie müssen Ihren Server so konfigurieren, dass alles in index.html umgeschrieben wird, um die App zu laden:

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode

Ich habe eine einfache Connect-Middleware geschrieben, um das Umschreiben von URLs in Grunzprojekten zu simulieren. https://gist.github.com/muratcorlu/5803655

Sie können so verwenden:

module.exports = function(grunt) {
  var urlRewrite = require('grunt-connect-rewrite');

  // Project configuration.
  grunt.initConfig({
    connect: {
      server: {
        options: {
          port: 9001,
          base: 'build',
          middleware: function(connect, options) {
            // Return array of whatever middlewares you want
            return [
              // redirect all urls to index.html in build folder
              urlRewrite('build', 'index.html'),

              // Serve static files.
              connect.static(options.base),

              // Make empty directories browsable.
              connect.directory(options.base)
            ];
          }
        }
      }
    }
  })
};

Wenn Sie sich im .NET-Stack mit MVC mit AngularJS befinden, müssen Sie Folgendes tun, um das '#' aus der URL zu entfernen:

1. Richten Sie Ihre Basis-HREF auf Ihrer _Layout-Seite ein: <head> <base href="https://stackoverflow.com/"> </head>

2. Fügen Sie dann Folgendes in Ihre eckige App-Konfiguration ein: $locationProvider.html5Mode(true)

3. Oben wird '#' aus der URL entfernt, aber die Seitenaktualisierung funktioniert nicht, z. B. wenn Sie sich in der Seitenaktualisierung "yoursite.com/about" befinden, erhalten Sie eine 404. Dies liegt daran, dass MVC das Winkelrouting und das MVC-Muster nicht kennt sucht nach einer MVC-Seite für 'about', die im MVC-Routing-Pfad nicht vorhanden ist. Um dieses Problem zu umgehen, senden Sie alle MVC-Seitenanforderungen an eine einzelne MVC-Ansicht. Sie können dies tun, indem Sie eine Route hinzufügen, die alle URLs abfängt

routes.MapRoute(
        name: "App",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );

IIS URL Rewrite Rule, um 404-Fehler nach der Seitenaktualisierung im HTML5-Modus zu vermeiden

Für eckige Ausführung unter IIS unter Windows

<rewrite>
  <rules>
    <rule name="AngularJS" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

NodeJS / ExpressJS-Routen zur Verhinderung von 404-Fehlern nach Seitenaktualisierung im HTML5-Modus

Für Winkellauf unter Node / Express

var express = require('express');
var path = require('path');
var router = express.Router();

// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));

// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {
    res.sendFile(path.resolve('app/index.html'));
});

module.exports = router;

Weitere Informationen unter: AngularJS - Aktivieren der Seitenaktualisierung im HTML5-Modus ohne 404-Fehler in NodeJS und IIS

Wie bereits erwähnt, müssen Sie Routen auf dem Server neu schreiben und festlegen <base href="https://stackoverflow.com/"/>.

Für gulp-connect:

npm install connect-pushstate

var gulp = require('gulp'),
  connect = require('gulp-connect'),
  pushState = require('connect-pushstate/lib/pushstate').pushState;
...
connect.server({
  ...
  middleware: function (connect, options) {
    return [
      pushState()
    ];
  }
  ...
})
....

Ich verwende Apache (xampp) in meiner Entwicklungsumgebung und Apache in der Produktion. Fügen Sie hinzu:

errorDocument 404 /index.html

Um den .htaccess für mich dieses Problem zu lösen.

Für Grunt und Browsersync verwenden connect-modrewrite hier

var modRewrite = require('connect-modrewrite');    


browserSync: {
            dev: {
                bsFiles: {

                    src: [
                        'app/assets/css/*.css',
                        'app/*.js',
                        'app/controllers/*.js',
                        '**/*.php',
                        '*.html',
                        'app/jade/includes/*.jade',
                        'app/views/*.html',
               ],
            },
        options: {
            watchTask: true,
            debugInfo: true,
            logConnections: true,
            server: {
                baseDir :'./',
                middleware: [
                       modRewrite(['!\.html|\.js|\.jpg|\.mp4|\.mp3|\.gif|\.svg\|.css|\.png$ /index.html [L]'])
                ]
            },

            ghostMode: {
                scroll: true,
                links: true,
                forms: true
                    }
                }
            }
        },

Ich habe es gelöst

test: {
        options: {
          port: 9000,
          base: [
            '.tmp',
            'test',
            '<%= yeoman.app %>'
          ],
         middleware: function (connect) {
                  return [
                      modRewrite(['^[^\\.]*$ /index.html [L]']),
                      connect.static('.tmp'),
                      connect().use(
                          '/bower_components',
                          connect.static('./bower_components')
                      ),
                      connect.static('app')
                  ];
              }
        }
      },

Ich beantworte diese Frage aus der größeren Frage:

Wenn ich $ locationProvider.html5Mode (true) hinzufüge, erlaubt meine Site das Einfügen von URLs nicht. Wie konfiguriere ich meinen Server so, dass er funktioniert, wenn html5Mode wahr ist?

Wenn Sie html5Mode aktiviert haben, wird das Zeichen # nicht mehr in Ihren URLs verwendet. Das Symbol # ist nützlich, da keine serverseitige Konfiguration erforderlich ist. Ohne # sieht die URL viel besser aus, erfordert aber auch serverseitige Umschreibungen. Hier sind einige Beispiele:

Für Express-Umschreibungen mit AngularJS können Sie dies mit den folgenden Updates lösen:

app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname + '/public/app/views/index.html'));
});

und

<!-- FOR ANGULAR ROUTING -->
<base href="/">

und

app.use('/',express.static(__dirname + '/public'));

Ich glaube, Ihr Problem betrifft den Server. In der eckigen Dokumentation zum HTML5-Modus (unter dem Link in Ihrer Frage) heißt es:

Serverseite Wenn Sie diesen Modus verwenden, müssen Sie die URL auf der Serverseite neu schreiben. Grundsätzlich müssen Sie alle Links zum Einstiegspunkt Ihrer Anwendung (z. B. index.html) neu schreiben.

Ich glaube, Sie müssen eine URL-Umschreibung von / about nach / einrichten.

Wir hatten eine Serverumleitung in Express:

app.get('*', function(req, res){
    res.render('index');
});

und wir bekamen immer noch Probleme mit der Seitenaktualisierung, selbst nachdem wir das hinzugefügt hatten <base href="https://stackoverflow.com/" />.

Lösung: Stellen Sie sicher, dass Sie zum Navigieren echte Links auf Ihrer Seite verwenden. Geben Sie die Route nicht in die URL ein, sonst erhalten Sie eine Seitenaktualisierung. (dummer Fehler, ich weiß)

:-P

Endlich habe ich eine Möglichkeit, dieses Problem auf der Serverseite zu lösen, da es eher ein Problem mit AngularJs selbst ist. Ich verwende 1,5 Angularjs und habe das gleiche Problem beim erneuten Laden der Seite. Aber nachdem ich den folgenden Code in meine server.jsDatei eingefügt habe , ist es mein Tag, aber es ist keine richtige Lösung oder kein guter Weg.

app.use(function(req, res, next){
  var d = res.status(404);
     if(d){
        res.sendfile('index.html');
     }
});

Ich habe ein noch besseres Grunt-Plugin gefunden, das funktioniert, wenn Sie Ihre index.html und Gruntfile.js im selben Verzeichnis haben.

https://npmjs.org/package/grunt-connect-pushstate

Danach in deinem Gruntfile:

 var pushState = require('grunt-connect-pushstate/lib/utils').pushState;


    connect: {
    server: {
      options: {
        port: 1337,
        base: '',
        logger: 'dev',
        hostname: '*',
        open: true,
        middleware: function (connect, options) {
          return [
            // Rewrite requests to root so they may be handled by router
            pushState(),
            // Serve static files
            connect.static(options.base)
          ];
        }
      },
    }
},

I solved same problem using modRewrite.  
AngularJS is reload page when after # changes.  
But HTML5 mode remove # and invalid the reload.  
So we should reload manually.
# install connect-modrewrite
    $ sudo npm install connect-modrewrite --save

# gulp/build.js
    'use strict';
    var gulp = require('gulp');
    var paths = gulp.paths;
    var util = require('util');
    var browserSync = require('browser-sync');
    var modRewrite  = require('connect-modrewrite');
    function browserSyncInit(baseDir, files, browser) {
        browser = browser === undefined ? 'default' : browser;
        var routes = null;
        if(baseDir === paths.src || (util.isArray(baseDir) && baseDir.indexOf(paths.src) !== -1)) {
            routes = {
                '/bower_components': 'bower_components'
            };
        }

        browserSync.instance = browserSync.init(files, {
            startPath: '/',
            server: {
            baseDir: baseDir,
            middleware: [
                modRewrite([
                    '!\\.\\w+$ /index.html [L]'
                ])
            ],
            routes: routes
            },
            browser: browser
        });
    }

Ich hatte das gleiche Problem mit der mit JHipster generierten Java + Angular App . Ich habe es mit Filter und Liste aller eckigen Seiten in Eigenschaften gelöst:

application.yml:

angular-pages:
  - login
  - settings
...

AngularPageReloadFilter.java

public class AngularPageReloadFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        request.getRequestDispatcher("index.html").forward(request, response);
    }
}

WebConfigurer.java

private void initAngularNonRootRedirectFilter(ServletContext servletContext,
                                              EnumSet<DispatcherType> disps) {
    log.debug("Registering angular page reload Filter");
    FilterRegistration.Dynamic angularRedirectFilter =
            servletContext.addFilter("angularPageReloadFilter",
                    new AngularPageReloadFilter());
    int index = 0;
    while (env.getProperty("angular-pages[" + index + "]") != null) {
        angularRedirectFilter.addMappingForUrlPatterns(disps, true, "/" + env.getProperty("angular-pages[" + index + "]"));
        index++;
    }
    angularRedirectFilter.setAsyncSupported(true);
}

Hoffe, es wird für jemanden hilfreich sein.

Gulp + browserSync:

Installieren Sie connect-history-api-fallback über npm und konfigurieren Sie später Ihre Serve-Gulp-Aufgabe

var historyApiFallback = require('connect-history-api-fallback');

gulp.task('serve', function() {
  browserSync.init({
    proxy: {
            target: 'localhost:' + port,
            middleware: [ historyApiFallback() ]
        }
  });
});

Ihr serverseitiger Code lautet JAVA. Führen Sie dann die folgenden Schritte aus

Schritt 1: Download urlrewritefilter JAR Klicken Sie hier und speichern Sie, um den Pfad WEB-INF / lib zu erstellen

Schritt 2: Aktivieren Sie den HTML5-Modus $ locationProvider.html5Mode (true);

Schritt 3: Basis-URL festlegen <base href="https://stackoverflow.com/example.com/"/>

Schritt 4: Kopieren und Einfügen in Ihre WEB.XML

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

Schritt 5: Erstellen Sie eine Datei in WEN-INF / urlrewrite.xml

 <urlrewrite default-match-type="wildcard">


    <rule>
            <from>/</from>
            <to>/index.html</to>
        </rule>

    <!--Write every state dependent on your project url-->
    <rule>
            <from>/example</from>
            <to>/index.html</to>
        </rule>
    </urlrewrite>

Ich habe diese einfache Lösung, die ich verwendet habe, und ihre Funktionen.

In App / Exceptions / Handler.php

Fügen Sie dies oben hinzu:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Dann innerhalb der Rendermethode

public function render($request, Exception $exception)
{
    .......

       if ($exception instanceof NotFoundHttpException){

        $segment = $request->segments();

        //eg. http://site.dev/member/profile
        //module => member
        // view => member.index
        //where member.index is the root of your angular app could be anything :)
        if(head($segment) != 'api' && $module = $segment[0]){
            return response(view("$module.index"), 404);
        }

        return response()->fail('not_found', $exception->getCode());

    }
    .......

     return parent::render($request, $exception);
}

Ich habe das Problem behoben, indem ich das folgende Codeausschnitt in die Datei node.js eingefügt habe.

app.get("/*", function (request, response) {
    console.log('Unknown API called');
    response.redirect('/#' + request.url);
});

Hinweis: Wenn wir die Seite aktualisieren, wird nach der API anstelle der Angular-Seite gesucht (da die URL kein # -Tag enthält). Mit dem obigen Code leite ich mit # zur URL um

Schreiben Sie einfach eine Regel in web.config

<system.webServer>
  <rewrite>
    <rules>
    <rule name="AngularJS 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 input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
       </rules>
    </rewrite>
</system.webServer>

Fügen Sie dies im Index hinzu

<base href="/">

es funktioniert bei mir, vielleicht haben Sie vergessen, Html5Mode app.config festzulegen

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider){
    $locationProvider.html5Mode({ enabled: true, requireBase: true });
    $locationProvider.hashPrefix('!');
}