Il ricaricamento della pagina fornisce una richiesta GET errata con la modalità AngularJS HTML5

Voglio abilitare la modalità HTML5 per la mia app. Ho inserito il seguente codice per la configurazione, come mostrato qui :

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

Come puoi vedere, ho usato il $locationProvider.html5modee ho cambiato tutti i miei collegamenti in ng-hrefper escludere il /#/.

Il problema

Al momento, posso andare a localhost:9000/vedere la pagina dell'indice e passare ad altre pagine simili localhost:9000/about.

Tuttavia, il problema si verifica quando aggiorno la localhost:9000/aboutpagina. Ottengo il seguente output:Cannot GET /about

Se guardo le chiamate di rete:

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

Mentre se prima vado localhost:9000/e poi faccio clic su un pulsante che naviga verso /aboutottengo:

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

Il che rende la pagina perfettamente.

Come posso abilitare Angular per ottenere la pagina corretta quando aggiorno?

Dai documenti angolari

Lato server L'
utilizzo di questa modalità richiede la riscrittura degli URL sul lato server, in pratica è necessario riscrivere tutti i collegamenti al punto di ingresso dell'applicazione (ad es. Index.html)

La ragione di ciò è che quando visiti la pagina per la prima volta ( /about), ad esempio dopo un aggiornamento, il browser non ha modo di sapere che questo non è un vero URL, quindi va avanti e lo carica. Tuttavia, se hai prima caricato la pagina principale e tutto il codice javascript, quando accedi a /aboutAngular puoi accedervi prima che il browser tenti di colpire il server e gestirlo di conseguenza

Ci sono poche cose da configurare in modo che il tuo link nel browser sia simile http://yourdomain.com/pathe questi sono il tuo lato angolare config + server

1) AngularJS

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

2) lato server, basta inserire .htaccessnella cartella principale e incollarlo

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Altre cose interessanti da leggere sulla modalità html5 in angularjs e sulla configurazione richiesta per diversi ambienti https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode Anche questa domanda potrebbe aiutarti $ location / passare da html5 a hashbang mode / link rewriting

Ho avuto un problema simile e l'ho risolto con:

• Usando <base href="https://stackoverflow.com/index.html">nella pagina dell'indice

• Utilizzando un middleware catch all route nel mio nodo / Express server come segue (inserirlo dopo il router):

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

Penso che dovrebbe farti funzionare.

Se usi un server apache, potresti voler mod_rewrite i tuoi collegamenti. Non è difficile da fare. Solo alcune modifiche ai file di configurazione.

Tutto ciò presuppone che tu abbia abilitato html5mode su angularjs. Adesso. si noti che in 1.2 angolare, in realtà non è più consigliabile dichiarare un url di base.

Soluzione per BrowserSync e Gulp.

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

Prima installazione connect-history-api-fallback:

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

Quindi aggiungilo a gulpfile.js:

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

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

È necessario configurare il server per riscrivere tutto in index.html per caricare l'app:

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

Ho scritto un semplice middleware di connessione per simulare la riscrittura dell'URL su progetti grugniti. https://gist.github.com/muratcorlu/5803655

Puoi usare così:

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

Se sei nello stack .NET con MVC con AngularJS, questo è ciò che devi fare per rimuovere '#' dall'URL:

1. Imposta il tuo href di base nella tua pagina _Layout: <head> <base href="https://stackoverflow.com/"> </head>

2. Quindi, aggiungi quanto segue nella configurazione dell'app angolare: $locationProvider.html5Mode(true)

3. Sopra rimuoverà '#' dall'URL ma l'aggiornamento della pagina non funzionerà ad es. Se ci si trova in "yoursite.com/about" l'aggiornamento della pagina ti darà un 404. Questo perché MVC non è a conoscenza del routing angolare e secondo il modello MVC cercherà una pagina MVC per 'about' che non esiste nel percorso di routing MVC. Per ovviare a questo problema, è possibile inviare tutte le richieste di pagina MVC a una singola vista MVC e puoi farlo aggiungendo un percorso che intercetta tutti gli URL

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

Regola di riscrittura URL IIS per impedire l'errore 404 dopo l'aggiornamento della pagina in modalità html5

Per l'esecuzione angolare in IIS su 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 Percorsi per impedire l'errore 404 dopo l'aggiornamento della pagina in modalità html5

Per la corsa angolare in Nodo / 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;

Maggiori informazioni su: AngularJS - Abilita aggiornamento pagina modalità HTML5 senza errori 404 in NodeJS e IIS

Come altri hanno già detto, è necessario riscrivere le route sul server e impostarle <base href="https://stackoverflow.com/"/>.

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

Sto usando apache (xampp) nel mio ambiente di sviluppo e apache nella produzione, aggiungo:

errorDocument 404 /index.html

al .htaccess risolvere per me questo problema.

Per Grunt e Browsersync usa connect-modrewrite qui

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

Ho risolto

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

Sto rispondendo a questa domanda dalla domanda più ampia:

Quando aggiungo $ locationProvider.html5Mode (true), il mio sito non consentirà di incollare gli URL. Come configuro il mio server per funzionare quando html5Mode è true?

Quando hai abilitato html5Mode, il carattere # non sarà più utilizzato nei tuoi URL. Il simbolo # è utile perché non richiede alcuna configurazione lato server. Senza #, l'URL sembra molto più bello, ma richiede anche riscritture sul lato server. Ecco alcuni esempi:

Per Express Rewrites con AngularJS, puoi risolverlo con i seguenti aggiornamenti:

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

e

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

e

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

Credo che il tuo problema riguardi il server. La documentazione angolare relativa alla modalità HTML5 (al link nella tua domanda) afferma:

Lato server L'utilizzo di questa modalità richiede la riscrittura degli URL sul lato server, in pratica è necessario riscrivere tutti i collegamenti al punto di ingresso dell'applicazione (ad es. Index.html)

Credo che dovrai impostare una riscrittura dell'URL da / about a /.

Abbiamo avuto un reindirizzamento del server in Express:

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

e continuavamo a riscontrare problemi di aggiornamento della pagina, anche dopo aver aggiunto il <base href="https://stackoverflow.com/" />.

Soluzione: assicurati di utilizzare collegamenti reali nella tua pagina per navigare; non digitare il percorso nell'URL o otterrai un aggiornamento della pagina. (errore sciocco, lo so)

:-P

Finalmente ho avuto un modo per risolvere questo problema dal lato server in quanto è più simile a un problema con AngularJs stesso Sto usando 1.5 Angularjs e ho avuto lo stesso problema nel ricaricare la pagina. Ma dopo aver aggiunto il codice qui sotto nel mio server.jsfile è salvare la mia giornata ma non è una soluzione corretta o non un buon modo.

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

Ho trovato plug-in Grunt ancora migliore, che funziona se hai index.html e Gruntfile.js nella stessa directory;

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

Dopo quello nel tuo 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
        });
    }

Ho avuto lo stesso problema con l' app java + angular generata con JHipster . L'ho risolto con Filtro ed elenco di tutte le pagine angolari nelle proprietà:

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

Spero, sarà utile per qualcuno.

Gulp + browserSync:

Installa connect-history-api-fallback tramite npm, successivamente configura il tuo compito gulp

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

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

Il codice lato server è JAVA, quindi attenersi alla seguente procedura

passo 1: Scarica urlrewritefilter JAR Fai clic qui e salva per creare il percorso WEB-INF / lib

passaggio 2: abilitare la modalità HTML5 $ locationProvider.html5Mode (true);

passaggio 3: imposta l'URL di base <base href="https://stackoverflow.com/example.com/"/>

passaggio 4: copia e incolla sul tuo 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>

passaggio 5: creare il file 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>

Ho questa semplice soluzione che ho usato e funziona.

In App / Eccezioni / Handler.php

Aggiungi questo in alto:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Quindi all'interno del metodo di rendering

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

Ho risolto il problema aggiungendo lo snippet di codice seguente nel file node.js.

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

Nota: quando aggiorniamo la pagina, cercherà l'API anziché la pagina Angolare (a causa della mancanza di tag # nell'URL.). Utilizzando il codice sopra, sto reindirizzando all'URL con #

Basta scrivere una regola 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>

Nell'indice aggiungi questo

<base href="/">

funziona per me forse hai dimenticato di impostare Html5Mode app.config

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