Tải lại trang cung cấp yêu cầu GET sai với chế độ AngularJS HTML5

Tôi muốn bật chế độ HTML5 cho ứng dụng của mình. Tôi đã đặt mã sau đây cho cấu hình, như được hiển thị ở đây :

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

Như bạn có thể thấy, tôi đã sử dụng $locationProvider.html5modevà tôi đã thay đổi tất cả các liên kết của mình tại ng-hrefđể loại trừ /#/.

Vấn đề

Hiện tại, tôi có thể đến localhost:9000/và xem trang chỉ mục và điều hướng đến các trang khác như thế nào localhost:9000/about.

Tuy nhiên, vấn đề xảy ra khi tôi làm mới localhost:9000/abouttrang. Tôi nhận được đầu ra sau đây:Cannot GET /about

Nếu tôi nhìn vào các cuộc gọi mạng:

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

Trong khi nếu lần đầu tiên tôi đến localhost:9000/và sau đó nhấp vào nút điều hướng đến /abouttôi sẽ nhận được:

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

Mà làm cho trang hoàn hảo.

Làm cách nào tôi có thể kích hoạt góc để có được trang chính xác khi tôi làm mới?

Từ các tài liệu góc

Phía máy chủ
Sử dụng chế độ này yêu cầu viết lại URL ở phía máy chủ, về cơ bản, bạn phải viết lại tất cả các liên kết của bạn đến điểm vào của ứng dụng của bạn (ví dụ: index.html)

Lý do cho điều này là khi bạn lần đầu tiên truy cập trang ( /about), ví dụ: sau khi làm mới, trình duyệt không có cách nào để biết rằng đây không phải là một URL thực sự, vì vậy nó sẽ tiếp tục và tải nó. Tuy nhiên, nếu bạn đã tải lên trang gốc trước và tất cả mã javascript, thì khi bạn điều hướng đến /aboutAngular có thể vào đó trước khi trình duyệt cố gắng truy cập máy chủ và xử lý nó phù hợp

Có một vài điều cần thiết lập để liên kết của bạn trong trình duyệt sẽ trông như thế http://yourdomain.com/pathvà đây là cấu hình góc cạnh + máy chủ của bạn

1) AngularJS

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

2) phía máy chủ, chỉ cần đặt .htaccessvào thư mục gốc của bạn và dán cái này

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

Nhiều thứ thú vị hơn để đọc về chế độ html5 trong angularjs và cấu hình được yêu cầu cho mỗi môi trường khác nhau https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode Ngoài ra, câu hỏi này có thể giúp bạn $ location / chuyển đổi giữa chế độ html5 và chế độ hashbang / viết lại liên kết

Tôi đã có một vấn đề tương tự và tôi đã giải quyết nó bằng cách:

• Sử dụng <base href="https://stackoverflow.com/index.html">trong trang chỉ mục

• Sử dụng một tất cả các phần mềm trung gian định tuyến trong máy chủ nút / Express của tôi như sau (đặt nó sau bộ định tuyến):

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

Tôi nghĩ rằng sẽ giúp bạn đứng dậy và chạy.

Nếu bạn sử dụng máy chủ apache, bạn có thể muốn mod_rewrite liên kết của mình. Nó không khó để làm Chỉ cần một vài thay đổi trong tập tin cấu hình.

Tất cả những gì đang giả sử bạn đã kích hoạt html5mode trên angularjs. Hiện nay. lưu ý rằng trong góc 1,2, việc khai báo một url cơ sở không còn được khuyến khích nữa.

Giải pháp cho BrowserSync và Gulp.

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

Cài đặt đầu tiên connect-history-api-fallback:

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

Sau đó thêm nó vào gulpfile.js của bạn:

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

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

Bạn cần định cấu hình máy chủ của mình để viết lại mọi thứ vào index.html để tải ứng dụng:

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

Tôi đã viết một phần mềm trung gian kết nối đơn giản để mô phỏng việc viết lại url trên các dự án grunt. https://gist.github.com/muratcorlu/5803655

Bạn có thể sử dụng như thế:

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

Nếu bạn đang ở trong ngăn xếp .NET với MVC với AngularJS, đây là việc bạn phải làm để xóa '#' khỏi url:

1. Thiết lập cơ sở của bạn trong trang _Layout của bạn: <head> <base href="https://stackoverflow.com/"> </head>

2. Sau đó, thêm sau đây trong cấu hình ứng dụng góc cạnh của bạn: $locationProvider.html5Mode(true)

3. Ở trên sẽ xóa '#' khỏi url nhưng làm mới trang sẽ không hoạt động, ví dụ: nếu bạn đang ở trong trang "yoursite.com/about" sẽ cung cấp cho bạn 404. Điều này là do MVC không biết về định tuyến góc và theo mô hình MVC. sẽ tìm một trang MVC cho 'about' không tồn tại trong đường dẫn định tuyến MVC. Giải pháp cho việc này là gửi tất cả yêu cầu trang MVC đến một chế độ xem MVC duy nhất và bạn có thể làm điều đó bằng cách thêm một tuyến bắt tất cả url

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

Quy tắc viết lại URL IIS để ngăn lỗi 404 sau khi làm mới trang trong html5mode

Đối với góc chạy trong IIS trên 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>

Các tuyến NodeJS / ExpressJS để ngăn lỗi 404 sau khi làm mới trang trong html5mode

Đối với góc chạy dưới 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;

Thông tin thêm tại: AngularJS - Kích hoạt làm mới trang Chế độ HTML5 mà không có lỗi 404 trong NodeJS và IIS

Như những người khác đã đề cập, bạn cần viết lại các tuyến đường trên máy chủ và thiết lập <base href="https://stackoverflow.com/"/> .

Dành cho 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()
    ];
  }
  ...
})
....

Tôi đang sử dụng apache (xampp) trên môi trường dev của tôi và apache khi sản xuất, thêm:

errorDocument 404 /index.html

để giải quyết .htaccess cho tôi vấn đề này.

Đối với Grunt và Browseersync, sử dụng kết nối-modrewrite tại đây

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

Tôi đã giải quyết

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

Tôi đang trả lời câu hỏi này từ câu hỏi lớn hơn:

Khi tôi thêm $ locationProvider.html5Mode (true), trang web của tôi sẽ không cho phép dán các url. Làm cách nào để định cấu hình máy chủ của tôi hoạt động khi html5Mode là đúng?

Khi bạn đã bật html5Mode, ký tự # sẽ không còn được sử dụng trong các url của bạn. Biểu tượng # rất hữu ích vì nó không yêu cầu cấu hình phía máy chủ. Không có #, url trông đẹp hơn nhiều, nhưng nó cũng yêu cầu viết lại phía máy chủ. Dưới đây là một số ví dụ:

Đối với phần thưởng Express Express với AngularJS, bạn có thể giải quyết vấn đề này bằng các bản cập nhật sau:

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

và

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

và

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

Tôi tin rằng vấn đề của bạn liên quan đến máy chủ. Tài liệu góc cạnh liên quan đến chế độ HTML5 (tại liên kết trong câu hỏi của bạn) nêu rõ:

Phía máy chủ Sử dụng chế độ này yêu cầu viết lại URL ở phía máy chủ, về cơ bản, bạn phải viết lại tất cả các liên kết của bạn đến điểm vào của ứng dụng của bạn (ví dụ: index.html)

Tôi tin rằng bạn sẽ cần phải thiết lập một url viết lại từ / về /.

Chúng tôi đã có một chuyển hướng máy chủ trong Express:

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

và chúng tôi vẫn nhận được các vấn đề làm mới trang, ngay cả sau khi chúng tôi đã thêm <base href="https://stackoverflow.com/" />.

Giải pháp: đảm bảo bạn đang sử dụng các liên kết thực trong trang của mình để điều hướng; không nhập tuyến đường trong URL hoặc bạn sẽ nhận được làm mới trang. (sai lầm ngớ ngẩn, tôi biết)

:-P

Cuối cùng tôi cũng có cách giải quyết vấn đề này bởi phía máy chủ vì nó giống như một vấn đề với chính AngularJs Tôi đang sử dụng 1.5 Angularjs và tôi gặp vấn đề tương tự khi tải lại trang. Nhưng sau khi thêm mã dưới đây vào server.jstệp của tôi, nó sẽ tiết kiệm trong ngày của tôi nhưng đó không phải là một giải pháp phù hợp hoặc không phải là một cách tốt.

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

Tôi đã tìm thấy plugin Grunt thậm chí còn tốt hơn, nó hoạt động nếu bạn có index.html và Gruntfile.js trong cùng một thư mục;

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

Sau đó trong Gruntfile của bạn:

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

Tôi gặp vấn đề tương tự với ứng dụng java + angular được tạo bằng JHipster . Tôi đã giải quyết nó bằng Bộ lọc và danh sách tất cả các trang góc trong thuộc tính:

ứng dụng.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);
    }
}

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

Hy vọng, nó sẽ hữu ích cho ai đó.

Gulp + browserSync:

Cài đặt kết nối lịch sử-api-dự phòng qua npm, sau đó định cấu hình tác vụ gulp phục vụ của bạn

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

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

Mã phía máy chủ của bạn là JAVA, sau đó làm theo các bước dưới đây

Bước 1: Tải xuống urlrewritefilter JAR Bấm vào đây và lưu để xây dựng đường dẫn WEB-INF / lib

bước 2: Kích hoạt chế độ HTML5 $ locationProvider.html5Mode (true);

Bước 3: đặt URL cơ sở <base href="https://stackoverflow.com/example.com/"/>

Bước 4: sao chép và dán vào WEB.XML của bạn

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

Bước 5: tạo tệp trong 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>

Tôi có giải pháp đơn giản này tôi đã và đang sử dụng và nó hoạt động.

Trong Ứng dụng / Ngoại lệ / Handler.php

Thêm cái này ở trên cùng:

use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;

Sau đó, bên trong phương thức kết xuất

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

Tôi đã giải quyết vấn đề bằng cách thêm đoạn mã bên dưới vào tệp node.js.

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

Lưu ý: khi chúng tôi làm mới trang, nó sẽ tìm API thay vì trang Angular (Vì không có thẻ # trong URL.). Sử dụng đoạn mã trên, tôi đang chuyển hướng đến url bằng #

Chỉ cần viết ra một quy tắc trong 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>

Trong chỉ mục thêm cái này

<base href="/">

nó hoạt động với tôi có lẽ bạn đã quên cài đặt ứng dụng Html5Mode.config

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