Przeładowanie strony powoduje nieprawidłowe żądanie GET w trybie AngularJS HTML5

Chcę włączyć tryb HTML5 dla mojej aplikacji. Podałem następujący kod do konfiguracji, jak pokazano tutaj :

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'
    });

Jak widać, użyłem $locationProvider.html5modei zmieniłem wszystkie moje linki, ng-hrefaby wykluczyć /#/.

Problem

W tej chwili mogę przejść do localhost:9000/strony indeksu i przejść do innych stron takich jak localhost:9000/about.

Jednak problem występuje, gdy odświeżam localhost:9000/aboutstronę. Otrzymuję następujące dane wyjściowe:Cannot GET /about

Jeśli spojrzę na połączenia sieciowe:

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

Podczas gdy jeśli najpierw przejdę do, localhost:9000/a następnie kliknę przycisk, który przechodzi do /about, otrzymam:

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

Które renderuje stronę idealnie.

Jak mogę włączyć obsługę kątową, aby uzyskać poprawną stronę po odświeżeniu?

Z kątowych dokumentów

Po stronie serwera
Korzystanie z tego trybu wymaga przepisywania adresów URL po stronie serwera, w zasadzie musisz przepisać wszystkie linki do punktu wejścia aplikacji (np. Index.html)

Powodem tego jest to, że kiedy po raz pierwszy odwiedzasz stronę ( /about), np. Po odświeżeniu, przeglądarka nie może wiedzieć, że to nie jest prawdziwy adres URL, więc idzie dalej i ładuje go. Jeśli jednak najpierw załadowałeś stronę główną i cały kod javascript, to po przejściu do /aboutAngulara możesz się tam dostać, zanim przeglądarka spróbuje trafić na serwer i odpowiednio go obsłużyć

Jest kilka rzeczy do skonfigurowania, aby wyglądał twój link w przeglądarce, http://yourdomain.com/patha to jest twoja kątowa konfiguracja + strona serwera

1) AngularJS

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

2) po stronie serwera, po prostu włóż .htaccessdo folderu głównego i wklej to

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Bardziej interesujące rzeczy do przeczytania na temat trybu HTML5 w angularjs i konfiguracji wymaganej dla różnych środowisk https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode To pytanie może także pomóc $ location / przełączanie między trybem html5 a hashbang / przepisywanie linków

Miałem podobny problem i rozwiązałem go poprzez:

• Używanie <base href="https://stackoverflow.com/index.html">na stronie indeksu

• Używając oprogramowania pośredniczącego catch all route w moim węźle / serwerze Express w następujący sposób (umieść go za routerem):

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

Myślę, że to powinno cię uruchomić.

Jeśli korzystasz z serwera Apache, możesz zmodyfikować linki. To nie jest trudne do zrobienia. Kilka zmian w plikach konfiguracyjnych.

Wszystko to przy założeniu, że masz włączony tryb html5 na angularjs. Teraz. zwróć uwagę, że w kanciastym 1.2, deklarowanie podstawowego adresu URL nie jest już w rzeczywistości zalecane.

Rozwiązanie dla BrowserSync i Gulp.

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

Pierwsza instalacja connect-history-api-fallback:

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

Następnie dodaj go do pliku gulpfile.js:

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

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

Musisz skonfigurować serwer, aby przepisał wszystko do pliku index.html, aby załadować aplikację:

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

Napisałem proste oprogramowanie pośredniczące do podłączania do symulacji przepisywania adresów URL w projektach typu grunt. https://gist.github.com/muratcorlu/5803655

Możesz użyć w ten sposób:

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)
            ];
          }
        }
      }
    }
  })
};

Jeśli jesteś w stosie .NET z MVC z AngularJS, musisz to zrobić, aby usunąć „#” z adresu URL:

1. Skonfiguruj swój podstawowy href na stronie _Layout: <head> <base href="https://stackoverflow.com/"> </head>

2. Następnie dodaj następujące elementy w konfiguracji aplikacji kątowej: $locationProvider.html5Mode(true)

3. Powyżej usunie „#” z adresu URL, ale odświeżenie strony nie będzie działać, np. Jeśli jesteś w „yoursite.com/about” odświeżenie strony da ci 404. Jest tak, ponieważ MVC nie wie o routingu kątowym i według wzoru MVC wyszuka stronę MVC dla „about”, która nie istnieje w ścieżce routingu MVC. Obejściem tego problemu jest wysłanie całego żądania strony MVC do pojedynczego widoku MVC. Możesz to zrobić, dodając trasę, która przechwytuje wszystkie adresy URL

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

Reguła przepisywania adresów URL IIS, aby zapobiec błędowi 404 po odświeżeniu strony w trybie html5

Do pracy kątowej w IIS w systemie 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>

Trasy NodeJS / ExpressJS, aby zapobiec błędowi 404 po odświeżeniu strony w trybie html5

Do pracy kątowej pod 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;

Więcej informacji na: AngularJS - Włącz odświeżanie strony w trybie HTML5 bez błędów 404 w NodeJS i IIS

Jak wspomnieli inni, musisz przepisać trasy na serwerze i ustawić <base href="https://stackoverflow.com/"/>.

Dla 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()
    ];
  }
  ...
})
....

Używam apache (xampp) w moim środowisku deweloperskim i apache w produkcji, dodaj:

errorDocument 404 /index.html

do .htaccess rozwiązać dla mnie ten problem.

W przypadku Grunt i Browsersync użyj tutaj connect-modrewrite

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

Rozwiązałem

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')
                  ];
              }
        }
      },

Odpowiadam na to pytanie z większego pytania:

Kiedy dodam $ locationProvider.html5Mode (prawda), moja strona nie zezwala na wklejanie adresów URL. Jak skonfigurować serwer, aby działał, gdy parametr html5Mode jest prawdziwy?

Po włączeniu html5Mode znak # nie będzie już używany w twoich adresach URL. Symbol # jest przydatny, ponieważ nie wymaga konfiguracji po stronie serwera. Bez # adres URL wygląda o wiele ładniej, ale wymaga również przepisywania po stronie serwera. Oto kilka przykładów:

W przypadku Express Rewrites z AngularJS możesz rozwiązać ten problem, wprowadzając następujące aktualizacje:

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

i

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

i

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

Uważam, że twój problem dotyczy serwera. Dokumentacja kątowa dotycząca trybu HTML5 (pod linkiem w twoim pytaniu) stwierdza:

Po stronie serwera Korzystanie z tego trybu wymaga przepisywania adresów URL po stronie serwera, w zasadzie musisz przepisać wszystkie linki do punktu wejścia aplikacji (np. Index.html)

Uważam, że musisz skonfigurować przepisanie adresu URL z / about to /.

Mieliśmy przekierowanie serwera w Express:

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

i nadal występowały problemy z odświeżaniem strony, nawet po dodaniu <base href="https://stackoverflow.com/" />.

Rozwiązanie: upewnij się, że używasz prawdziwych linków na swojej stronie do nawigacji; nie wpisuj trasy w adresie URL, w przeciwnym razie nastąpi odświeżenie strony. (głupi błąd, wiem)

:-P

W końcu udało mi się rozwiązać ten problem po stronie serwera, ponieważ jest to bardziej problem z samym AngularJs. Używam 1.5 Angularjs i mam ten sam problem przy przeładowaniu strony. Ale po dodaniu poniższego kodu do mojego server.jspliku oszczędza mi to dzień, ale nie jest to właściwe rozwiązanie ani dobry sposób.

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

Znalazłem jeszcze lepszą wtyczkę Grunt, która działa, jeśli masz index.html i Gruntfile.js w tym samym katalogu;

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

Następnie w swoim pliku 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
        });
    }

Miałem ten sam problem z java + aplikacją kątową wygenerowaną za pomocą JHipstera . Rozwiązałem go za pomocą filtru i listy wszystkich stron kątowych we właściwościach:

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);
}

Mam nadzieję, że będzie to pomocne dla kogoś.

Gulp + browserSync:

Zainstaluj connect-history-api-fallback za pomocą npm, a następnie skonfiguruj swoje zadanie obsługi gulp

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

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

Kod po stronie serwera to JAVA, a następnie Wykonaj poniższe czynności

krok 1: Pobierz plik JAR urlrewritefilter Kliknij tutaj i zapisz, aby zbudować ścieżkę WEB-INF / lib

krok 2: Włącz tryb HTML5 $ locationProvider.html5Mode (true);

krok 3: ustaw podstawowy adres URL <base href="https://stackoverflow.com/example.com/"/>

krok 4: skopiuj i wklej do swojego 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>

krok 5: utwórz plik w 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>

Mam to proste rozwiązanie, z którego korzystam i które działa.

W aplikacji / Wyjątki / Handler.php

Dodaj to u góry:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Następnie w metodzie renderowania

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);
}

Rozwiązałem problem, dodając poniższy fragment kodu do pliku node.js.

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

Uwaga: gdy odświeżamy stronę, będzie ona szukała interfejsu API zamiast strony kątowej (z powodu braku tagu # w adresie URL). Korzystając z powyższego kodu, przekierowuję na adres URL za pomocą #

Wystarczy napisać regułę w pliku 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>

W indeksie dodaj to

<base href="/">

działa dla mnie może zapomniałeś ustawić Html5Mode app.config

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