1. ホーム
  2. angularjs

[解決済み] AngularJSのHTML5モードでページを再読み込みすると、間違ったGETリクエストが表示される

2022-04-19 16:45:40

質問

アプリでHTML5モードを有効にしたいのですが、どうすればいいですか?以下のようなコードを設定に置きました。 ここで :

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

ご覧の通り、私は $locationProvider.html5mode ですべてのリンクを変更しました。 ng-href を除外するために /#/ .

問題点

現在、私は localhost:9000/ のように、インデックスページを表示し、他のページに移動することができます。 localhost:9000/about .

を更新すると、問題が発生します。 localhost:9000/about ページが表示されます。次のような出力が得られます。 Cannot GET /about

ネットワークコールを見てみると

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

一方、最初に localhost:9000/ に移動するボタンをクリックします。 /about と出る。

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

これは、ページを完全にレンダリングします。

リフレッシュ時に正しいページを取得するために、angularを有効にするにはどうすればよいですか?

どのように解決するのですか?

からの angularドキュメント

<ブロッククオート

サーバーサイド

このモードを使用するには、サーバー側でURLの書き換えが必要です。基本的に、アプリケーションのエントリポイント(例:index.html)へのリンクをすべて書き換える必要があります。

その理由は、最初にページにアクセスしたとき( /about ブラウザはこれが本当のURLでないことを知る由もなく、そのまま読み込んでしまうのです。しかし、最初にルートページとすべてのJavaScriptコードを読み込んだ場合、次のページに移動したときに /about Angularはブラウザがサーバーにアクセスする前にそこに入り、それに応じて処理することができます。