Memuat ulang halaman memberikan permintaan GET yang salah dengan mode AngularJS HTML5

Saya ingin mengaktifkan mode HTML5 untuk aplikasi saya. Saya telah meletakkan kode berikut untuk konfigurasi, seperti yang ditunjukkan di sini :

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

Seperti yang Anda lihat, saya menggunakan $locationProvider.html5modedan saya mengubah semua tautan saya di ng-hrefuntuk mengecualikan /#/.

Masalah

Saat ini, saya dapat pergi ke localhost:9000/dan melihat halaman indeks dan menavigasi ke halaman lain seperti localhost:9000/about.

Namun, masalah terjadi ketika saya me-refresh localhost:9000/abouthalaman. Saya mendapatkan output berikut:Cannot GET /about

Jika saya melihat panggilan jaringan:

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

Sementara jika saya pertama kali pergi ke localhost:9000/dan kemudian klik tombol yang menavigasi ke /aboutsaya dapatkan:

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

Yang merender halaman dengan sempurna.

Bagaimana saya bisa mengaktifkan sudut untuk mendapatkan halaman yang benar ketika saya menyegarkan?

Dari dokumen sudut

Sisi server
Menggunakan mode ini memerlukan penulisan ulang URL di sisi server, pada dasarnya Anda harus menulis ulang semua tautan Anda ke titik masuk aplikasi Anda (mis. Index.html)

Alasan untuk ini adalah bahwa ketika Anda pertama kali mengunjungi halaman ( /about), misalnya setelah refresh, browser tidak memiliki cara untuk mengetahui bahwa ini bukan URL asli, jadi ia melanjutkan dan memuatnya. Namun jika Anda telah memuat halaman root terlebih dahulu, dan semua kode javascript, maka ketika Anda menavigasi ke /aboutAngular dapat masuk ke sana sebelum browser mencoba untuk menekan server dan menanganinya sesuai

Ada beberapa hal yang perlu diatur sehingga tautan Anda di browser akan terlihat seperti http://yourdomain.com/path dan ini adalah sisi konfigurasi + server Anda

1) AngularJS

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

2) sisi server, cukup masukkan ke .htaccessdalam folder root Anda dan rekatkan ini

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Lebih banyak hal menarik untuk dibaca tentang mode html5 di angularjs dan konfigurasi yang diperlukan per lingkungan yang berbeda https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -untuk bekerja dengan html5mode Juga pertanyaan ini mungkin membantu Anda $ lokasi / beralih antara html5 dan mode hashbang / penulisan ulang tautan

Saya memiliki masalah yang sama dan saya menyelesaikannya dengan:

• Menggunakan <base href="https://stackoverflow.com/index.html">di halaman indeks

• Menggunakan catch all route middleware di node / Express server saya sebagai berikut (letakkan setelah router):

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

Saya pikir itu harus membuat Anda bangun dan berjalan.

Jika Anda menggunakan server apache, Anda mungkin ingin mod_rewrite tautan Anda. Itu tidak sulit untuk dilakukan. Hanya beberapa perubahan dalam file konfigurasi.

Semua itu dengan asumsi Anda telah mengaktifkan html5mode di angularjs. Sekarang. perhatikan bahwa dalam sudut 1.2, mendeklarasikan url basis tidak direkomendasikan lagi sebenarnya.

Solusi untuk BrowserSync dan Gulp.

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

Instal pertama connect-history-api-fallback:

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

Kemudian tambahkan ke gulpfile.js Anda:

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

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

Anda perlu mengonfigurasi server Anda untuk menulis ulang semuanya menjadi index.html untuk memuat aplikasi:

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

Saya menulis middleware connect sederhana untuk mensimulasikan url-penulisan ulang pada proyek-proyek kasar https://gist.github.com/muratcorlu/5803655

Anda bisa menggunakan seperti itu:

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

Jika Anda berada di .NET stack dengan MVC dengan AngularJS, inilah yang harus Anda lakukan untuk menghapus '#' dari url:

1. Siapkan markas Anda di halaman _Layout Anda: <head> <base href="https://stackoverflow.com/"> </head>

2. Lalu, tambahkan berikut ini di konfigurasi aplikasi sudut Anda: $locationProvider.html5Mode(true)

3. Di atas akan menghapus '#' dari url tetapi penyegaran halaman tidak akan berfungsi misalnya jika Anda berada di penyegaran halaman "yoursite.com/about" akan memberi Anda 404. Ini karena MVC tidak tahu tentang perutean sudut dan menurut pola MVC. akan mencari halaman MVC untuk 'about' yang tidak ada di jalur routing MVC. Solusi untuk ini adalah mengirim semua permintaan halaman MVC ke tampilan MVC tunggal dan Anda dapat melakukannya dengan menambahkan rute yang menangkap semua url

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

Aturan penulisan ulang URL IIS untuk mencegah kesalahan 404 setelah refresh halaman di html5mode

Untuk menjalankan sudut di bawah IIS pada 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 Rute untuk mencegah 404 kesalahan setelah penyegaran halaman di html5mode

Untuk menjalankan sudut di bawah Node / Ekspres

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;

Info lebih lanjut di: AngularJS - Aktifkan Halaman Mode HTML5 Refresh Tanpa 404 Kesalahan di NodeJS dan IIS

Seperti yang disebutkan orang lain, Anda perlu menulis ulang rute di server dan mengaturnya <base href="https://stackoverflow.com/"/>.

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

Saya menggunakan apache (xampp) di lingkungan dev saya dan apache di bagian produksi, tambahkan:

errorDocument 404 /index.html

untuk memecahkan .htaccess untuk saya masalah ini.

Untuk Grunt dan Browsersync gunakan connect-modrewrite di sini

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

Saya memecahkannya

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

Saya menjawab pertanyaan ini dari pertanyaan yang lebih besar:

Ketika saya menambahkan $ locationProvider.html5Mode (true), situs saya tidak akan mengizinkan menempelnya url. Bagaimana cara mengkonfigurasi server saya agar berfungsi ketika html5Mode benar?

Ketika Anda mengaktifkan html5Mode, karakter # tidak akan lagi digunakan di url Anda. Simbol # berguna karena tidak memerlukan konfigurasi sisi server. Tanpa #, url terlihat jauh lebih baik, tetapi juga membutuhkan penulisan ulang sisi server. Berikut ini beberapa contohnya:

Untuk Express Rewrites dengan AngularJS, Anda dapat menyelesaikannya dengan pembaruan berikut:

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

dan

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

dan

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

Saya yakin masalah Anda berkaitan dengan server. Dokumentasi sudut berkaitan dengan mode HTML5 (pada tautan dalam pertanyaan Anda) menyatakan:

Sisi server Menggunakan mode ini memerlukan penulisan ulang URL di sisi server, pada dasarnya Anda harus menulis ulang semua tautan Anda ke titik masuk aplikasi Anda (mis. Index.html)

Saya yakin Anda perlu mengatur penulisan ulang url dari / about to /.

Kami memiliki pengalihan server di Express:

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

dan kami masih mendapatkan masalah penyegaran laman, bahkan setelah kami menambahkan <base href="https://stackoverflow.com/" />.

Solusi: pastikan Anda menggunakan tautan nyata di halaman Anda untuk bernavigasi; jangan mengetikkan rute di URL atau Anda akan mendapatkan refresh halaman. (Kesalahan konyol, aku tahu)

:-P

Akhirnya saya mendapatkan cara untuk menyelesaikan masalah ini dari sisi server karena ini lebih seperti masalah dengan AngularJs itu sendiri. Saya menggunakan 1,5 Angularjs dan saya mendapatkan masalah yang sama saat memuat ulang halaman. Tetapi setelah menambahkan kode di bawah ini dalam server.jsfile saya itu menghemat hari saya tetapi itu bukan solusi yang tepat atau bukan cara yang baik.

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

Saya telah menemukan plugin Grunt yang lebih baik, yang berfungsi jika Anda memiliki index.html dan Gruntfile.js di direktori yang sama;

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

Setelah itu di Gruntfile Anda:

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

Saya memiliki masalah yang sama dengan aplikasi java + angular yang dihasilkan dengan JHipster . Saya menyelesaikannya dengan Filter dan daftar semua halaman sudut di properti:

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

Semoga bermanfaat bagi seseorang.

Gulp + browserSync:

Instal connect-history-api-fallback melalui npm, kemudian konfigurasikan tugas serve tegp Anda

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

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

Kode sisi server Anda adalah JAVA kemudian Ikuti langkah-langkah di bawah ini

langkah 1: Unduh urlrewritefilter JAR Klik Di Sini dan simpan untuk membangun jalur WEB-INF / lib

langkah 2: Aktifkan Mode HTML5 $ locationProvider.html5Mode (true);

langkah 3: atur URL dasar <base href="https://stackoverflow.com/example.com/"/>

langkah 4: salin dan tempel ke WEB.XML Anda

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

langkah 5: buat file di 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>

Saya punya solusi sederhana yang telah saya gunakan dan kerjanya.

Di App / Pengecualian / Handler.php

Tambahkan ini di atas:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Kemudian di dalam metode render

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

Saya telah menyelesaikan masalah dengan menambahkan potongan kode di bawah ini ke file node.js.

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

Catatan: saat kami me-refresh halaman, ia akan mencari API alih-alih halaman Angular (Karena tidak ada tag # di URL.). Dengan menggunakan kode di atas, saya mengarahkan ke url dengan #

Cukup tulis aturan di 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>

Dalam indeks tambahkan ini

<base href="/">

ini berfungsi untuk saya mungkin Anda lupa mengatur Html5Mode app.config

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