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


193

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?



1
Saya menyelesaikannya untuk saya. Lihat di sini stackoverflow.com/questions/22394014/…
Sasha B.

Jawaban:


99

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


21
Ketika dikatakan "Anda harus menulis ulang semua tautan Anda ke titik masuk aplikasi Anda (mis. Index.html)" apa artinya ini? Apakah itu berarti saya harus masuk ke saya $routeProviderdan mengubah jalur masing-masing templateUrlmisalnya dari templateUrl : '/views/about.html',ke templateUrl : 'example.com/views/about.html',?

7
Tidak, aturan Anda di $ routeProvider harus tetap seperti semula. Jawabannya mengacu pada "sisi server". Ini mengacu pada mengubah perutean pada server yang menyediakan halaman html sudut Anda. Sebelum setiap permintaan sampai ke aplikasi sudut Anda, itu harus melewati terlebih dahulu melalui perutean sisi-server, yang seharusnya menulis ulang semua permintaan untuk menunjuk ke titik masuk aplikasi sudut Anda (mis. 'Index.html', atau '/', tergantung bagaimana sudut Anda rute bekerja).
marni

Jika saya melayani index.html yang saya minifikasi melalui beberapa CDN daripada bagaimana mekanisme routing ini akan dijalankan ??
CrazyGeek


5
Artikel bagus untuk apache, ada contoh htaccess: ngmilk.rocks/2015/03/09/…
Alcalyn

63

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


Hai. Saya mencoba solusi di atas, membuat perubahan pada file konfigurasi saya. Tapi tetap tidak berhasil. Me-refresh URL masih memberikan kesalahan "404 TIDAK DITEMUKAN".
kTn

Bagaimana cara mengarahkan / menulis ulang dalam aplikasi yang digunakan di Websphere?
Gary

Saya tidak mengerti mengapa tidak!
lokers

36

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.


1
Solusi ini bekerja untuk saya dengan pengaturan: <base href="https://stackoverflow.com/">dan menambahkan perutean Express yang Anda sarankan. Terima kasih banyak.
Gilad Peleg

Tahir Chad, apakah Anda masih perlu menggunakan serverl url-penulisan ulang setelah mengimplementasikan <base href="https://stackoverflow.com/index.html">?
Cody

Ya, Anda dapat melihat penulisan ulang url sebagai cara untuk mengatur url dasar aplikasi / situs web Anda di batu (termasuk domain). Pernyataan html 'url dasar' hanyalah cara untuk memastikan bahwa semua tautan relatif diturunkan dengan benar dari basis yang sama. Url dasar tidak mutlak diperlukan jika tautan Anda mutlak.
Taye

1
Ketika saya menggunakan ini, saya hanya melihat kode html itu sendiri pada halaman, tidak diterjemahkan sebagai halaman yang sebenarnya.
Nuh

2
Jawaban ini layak untuk bintang tiga! Terima kasih telah memberikan jawaban langsung seperti itu. Semua orang hanya mengulangi baris yang sama tentang "perlu melakukan pengalihan server".
Ahmed Haque

27

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

Oh snap! Akhirnya bantuan dari pengembangan tampilan Sudut! Dan sebagai bonus, rute URL standar (tanpa hash-bang) juga! Terima kasih!
sedikit kurang pada

1
Bekerja seperti pesona ... Terima kasih banyak!
Nishanth Nair

1
Jika Anda menggunakan port tertentu (yaitu templat kosong ion berjalan pada port 8100), cukup tambahkan properti tambahan setelah server yaitu server: { ... }, port: 8100, kemudian tambahkan servetugas ke tugas tegukan default Anda (yaitu gulp.task('default', ['sass', 'serve']);), dan kemudian Anda dapat menjalankan aplikasi tanpa Cannot GET ...kesalahan browser saat Anda me-refresh halaman dengan menjalankan gulp. Perhatikan bahwa menjalankan server dengan ionic servemasih menemukan kesalahan.
Luke Schoen

Ini bekerja dengan baik ketika saya menggunakan browser pengembangan, dalam prod saya menjalankan aplikasi sebagai aplikasi ekspres dan mengarahkan semua rute ke aplikasi sudut sebagai app.get ('*', fungsi (req, res) {req.session.valid = true ; res.redirect ('/');}); Halaman tidak memuat saat memberikan jalur secara langsung?
Tuan AJ

13

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


1
Sempurna, masalah bagi saya adalah menggunakan Laravel Forge untuk menyediakan server, yang memiliki garis nginx yang relevan sebagai try_files $uri $uri/ /index.php?...pengganti yang dibutuhkan index.html. Terima kasih untuk tautannya!
CJ Thompson

Harus menjadi jawaban teratas, Memberikan setiap situasi apa pun server Anda. Bekerja dengan sempurna dengan NodeJS
Joe Lloyd

10

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

Apakah ada cara manual untuk menyelesaikan penulisan ulang URL di $routeProvider?

1
Saya tidak mendapatkan urlRewriteperingatan ketika mencoba menjalankannya, dan saya kesulitan menemukan koneksi yang tepat dengan penulisan ulang yang dapat saya gunakan.

Menunjukkan saya kesalahan "Object build tidak memiliki metode 'initConfig' Gunakan --force untuk melanjutkan."
edonbajrami

8

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

8

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


Terima kasih, aturan IIS membantu saya dengan aplikasi angular2 yang digunakan dalam warna biru yang gagal mengarahkan ke rute anak.
bitsprint

Saya tidak bisa cukup berterima kasih atas solusi untuk IIS (localhost di VS 2013). Memukul kepalaku cukup lama karena frustrasi, akhirnya menemukan jawaban ini. Bekerja seperti pesona.
Florida G.

5

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

4

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.


4

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

ada 15 di atas jawaban ini yang merupakan pinggang waktu. 1. npm install connect-modrewrite --save2. require in gruntfile3. salin objek server di atas
Omar

Terima kasih ini bekerja untuk saya dalam gulp 4 dengan pengaturan browserSync.
Abdeali Chandanwala

Senang membantu @Abdeali Chandanwala!
MrThunder

@ Omar Saya tidak setuju dengan Anda, pengguna yang kurang mahir seperti saya mendapat manfaat dari melihat cara menambahkannya ke gulpfile. Yang terbaik untuk diingat bahwa orang-orang memiliki tingkat pengetahuan yang berbeda dan hanya perlu menulis di gruntfile tidak akan membantu karena saya akan berasumsi bahwa mereka mengerti bagaimana menambahkannya ke tegukan.
MrThunder

3

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

3

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

Terima kasih ini solusinya. Untuk Nodejs tambahkan ke app.js ke app.use ('/ *', indeks);
Tigin

2

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


Terima kasih atas jawaban Anda. Jadi ketika saya berada di halaman tentang dan saya menyegarkan, server harus menulis ulang url ke /? Masalahnya adalah bahwa saya bekerja dengan backend rel yang ada di domain yang berbeda. Semua komunikasi melalui panggilan API. Bagaimana saya melakukan penulisan ulang URL itu?
Dieter De Mesmaeker

Masalahnya adalah aplikasi Anda tersedia di rute server Anda / jadi ketika Anda menyegarkan url yang / tentang browser akan meminta dari server Anda halaman apa pun di / tentang (dalam hal ini Anda tidak memiliki halaman di sana sehingga Anda perlu mengarahkan ulang mereka kembali).
lucuma

2

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


tetapi karena SETIAP permintaan http ini akan memiliki file indeks, Seperti misalnya: / getJsonFromServer - permintaan http yang mengembalikan data tetapi karena konfigurasi ini juga akan mengembalikan halaman indeks
vijay

1

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

0

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

Modul grunt-connect-pushstate sudah tidak digunakan lagi
Evan Plaice

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

0

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.


0

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

0

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>

Bagaimana menambahkan aturan untuk url dinamis seperti - test.com/user/101 test.com/user/102
Krishna Kumar Chourasiya

0

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

0

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 #


-2

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('!');
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.