Le rechargement de la page donne une demande GET erronée avec le mode AngularJS HTML5

Je souhaite activer le mode HTML5 pour mon application. J'ai mis le code suivant pour la configuration, comme indiqué ici :

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

Comme vous pouvez le voir, j'ai utilisé le $locationProvider.html5modeet j'ai changé tous mes liens aung-href pour exclure le /#/.

Le problème

Pour le moment, je peux aller localhost:9000/voir la page d'index et naviguer vers les autres pages comme localhost:9000/about.

Cependant, le problème se produit lorsque j'actualise la localhost:9000/aboutpage. J'obtiens la sortie suivante:Cannot GET /about

Si je regarde les appels réseau:

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

Alors que si je vais d'abord sur localhost:9000/puis cliquez sur un bouton qui accède à, /aboutj'obtiens:

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

Ce qui rend la page parfaitement.

Comment puis-je activer angulaire pour obtenir la bonne page lorsque je rafraîchis?

Des documents angulaires

Côté serveur L'
utilisation de ce mode nécessite une réécriture d'URL côté serveur, fondamentalement vous devez réécrire tous vos liens vers le point d'entrée de votre application (par exemple index.html)

La raison en est que lorsque vous visitez la page ( /about), par exemple après une actualisation, le navigateur n'a aucun moyen de savoir que ce n'est pas une véritable URL, donc il va de l'avant et la charge. Cependant, si vous avez d'abord chargé la page racine et tout le code javascript, lorsque vous accédez à /aboutAngular, vous pouvez y accéder avant que le navigateur n'essaie de frapper le serveur et de le gérer en conséquence

Il y a peu de choses à configurer, donc votre lien dans le navigateur ressemblera http://yourdomain.com/pathet ce sont votre configuration angulaire + côté serveur

1) AngularJS

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

2) côté serveur, placez-le .htaccessdans votre dossier racine et collez-le

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Plus de choses intéressantes à lire sur le mode html5 dans angularjs et la configuration requise par environnement différent https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode Cette question peut également vous aider à $ location / basculer entre html5 et le mode hashbang / réécriture de liens

J'ai eu un problème similaire et je l'ai résolu en:

• Utilisation <base href="https://stackoverflow.com/index.html">dans la page d'index

• En utilisant un middleware catch all route dans mon nœud / serveur Express comme suit (mettez-le après le routeur):

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

Je pense que cela devrait vous permettre d'être opérationnel.

Si vous utilisez un serveur apache, vous souhaiterez peut-être mod_rewrite vos liens. Ce n'est pas difficile à faire. Juste quelques changements dans les fichiers de configuration.

Tout cela suppose que html5mode soit activé sur angularjs. Maintenant. notez que dans angular 1.2, déclarer une URL de base n'est plus recommandé en fait.

Solution pour BrowserSync et Gulp.

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

Première installation connect-history-api-fallback:

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

Ajoutez-le ensuite à votre gulpfile.js:

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

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

Vous devez configurer votre serveur pour tout réécrire dans index.html pour charger l'application:

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

J'ai écrit un middleware de connexion simple pour simuler la réécriture d'URL sur des projets de grognement. https://gist.github.com/muratcorlu/5803655

Vous pouvez utiliser comme ça:

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

Si vous êtes dans la pile .NET avec MVC avec AngularJS, voici ce que vous devez faire pour supprimer le '#' de l'URL:

1. Configurez votre href de base dans votre page _Layout: <head> <base href="https://stackoverflow.com/"> </head>

2. Ensuite, ajoutez ce qui suit dans la configuration de votre application angulaire: $locationProvider.html5Mode(true)

3. Ci-dessus supprimera "#" de l'URL mais l'actualisation de la page ne fonctionnera pas. Par exemple, si vous êtes dans "yoursite.com/about", l'actualisation de la page vous donnera un 404. Ceci est dû au fait que MVC ne connaît pas le routage angulaire et par modèle MVC il recherchera une page MVC pour «à propos» qui n'existe pas dans le chemin de routage MVC. La solution consiste à envoyer toutes les demandes de page MVC à une seule vue MVC et vous pouvez le faire en ajoutant une route qui capture toutes les URL

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

Règle de réécriture d'URL IIS pour éviter l'erreur 404 après l'actualisation de la page en html5mode

Pour un fonctionnement angulaire sous IIS sous 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>

Routes NodeJS / ExpressJS pour éviter l'erreur 404 après l'actualisation de la page en html5mode

Pour un fonctionnement angulaire sous 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;

Plus d'informations sur: AngularJS - Activer l'actualisation de la page en mode HTML5 sans erreurs 404 dans NodeJS et IIS

Comme d'autres l'ont mentionné, vous devez réécrire les itinéraires sur le serveur et les définir <base href="https://stackoverflow.com/"/>.

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

J'utilise apache (xampp) sur mon environnement de développement et apache sur la production, ajoutez:

errorDocument 404 /index.html

au .htaccess résoudre pour moi ce problème.

Pour Grunt et Browsersync, utilisez connect-modrewrite ici

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

J'ai résolu de

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

Je réponds à cette question à partir de la question plus large:

Lorsque j'ajoute $ locationProvider.html5Mode (true), mon site ne permet pas de coller des URL. Comment configurer mon serveur pour qu'il fonctionne lorsque html5Mode est vrai?

Lorsque vous avez activé html5Mode, le caractère # ne sera plus utilisé dans vos URL. Le symbole # est utile car il ne nécessite aucune configuration côté serveur. Sans #, l'url semble beaucoup plus agréable, mais elle nécessite également des réécritures côté serveur. Voici quelques exemples:

Pour Express Rewrites avec AngularJS, vous pouvez résoudre ce problème avec les mises à jour suivantes:

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

et

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

et

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

Je crois que votre problème concerne le serveur. La documentation angulaire concernant le mode HTML5 (au lien dans votre question) indique:

Côté serveur L'utilisation de ce mode nécessite une réécriture d'URL côté serveur, fondamentalement vous devez réécrire tous vos liens vers le point d'entrée de votre application (par exemple index.html)

Je pense que vous devrez configurer une réécriture d'URL de / à propos de /.

Nous avons eu une redirection de serveur dans Express:

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

et nous rencontrions toujours des problèmes d'actualisation de page, même après avoir ajouté le <base href="https://stackoverflow.com/" />.

Solution: assurez-vous que vous utilisez de vrais liens dans votre page pour naviguer; ne saisissez pas l'itinéraire dans l'URL ou vous obtiendrez une actualisation de la page. (erreur stupide, je sais)

:-P

Enfin, j'ai eu un moyen de résoudre ce problème côté serveur car il ressemble plus à un problème avec AngularJs lui-même J'utilise 1.5 Angularjs et j'ai eu le même problème lors du rechargement de la page. Mais après avoir ajouté le code ci-dessous dans mon server.jsfichier, c'est sauver ma journée, mais ce n'est pas une bonne solution ou pas un bon moyen.

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

J'ai trouvé un plugin Grunt encore meilleur, qui fonctionne si vous avez votre index.html et Gruntfile.js dans le même répertoire;

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

Après cela dans votre 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
        });
    }

J'ai eu le même problème avec java + angular app généré avec JHipster . Je l'ai résolu avec Filter et la liste de toutes les pages angulaires dans les propriétés:

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

J'espère que ce sera utile pour quelqu'un.

Navigateur Gulp + Sync:

Installez connect-history-api-fallback via npm, puis configurez votre tâche serve gulp

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

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

Votre code côté serveur est JAVA, puis suivez les étapes ci-dessous

étape 1: Télécharger le fichier JAR urlrewritefilter Cliquez ici et enregistrez-le pour créer le chemin WEB-INF / lib

étape 2: Activer le mode HTML5 $ locationProvider.html5Mode (true);

étape 3: définir l'URL de base <base href="https://stackoverflow.com/example.com/"/>

étape 4: copier et coller sur votre 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>

étape 5: créer un fichier dans 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>

J'ai cette solution simple que j'utilise et ses travaux.

Dans App / Exceptions / Handler.php

Ajoutez ceci en haut:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Puis à l'intérieur de la méthode de rendu

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

J'ai résolu le problème en ajoutant l'extrait de code ci-dessous dans le fichier node.js.

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

Remarque: lorsque nous actualisons la page, il recherchera l'API au lieu de la page angulaire (en raison de l'absence de balise # dans l'URL.). En utilisant le code ci-dessus, je redirige vers l'URL avec #

Écrivez simplement une règle dans 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>

Dans l'index ajoutez ceci

<base href="/">

cela fonctionne pour moi, vous avez peut-être oublié de définir Html5Mode app.config

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