Angular2 刷新页面返回 404 的处理方法

在使用 Angular2 中的路由器做单页应用时,如果刷新页面,或直接通过地址栏的 URL 进行访问,你会发现显示了 404 页面,如果你的后台服务是用的 shelf ,那么需要添加中间件Middleware,修改处理器路径hanlderPath(默认为 \ )为完整的 URL,下面是完整的服务端代码:

import 'package:shelf/shelf.dart' as shelf;
import 'package:shelf/shelf_io.dart' as io;
import 'package:shelf_static/shelf_static.dart' as shelf_static;
import 'package:path/path.dart' as Path;

import 'dart:io';

final String rootWeb = "build/web";

void main() {
  var handler = const shelf.Pipeline()
      .addMiddleware(shelf.logRequests())
      .addMiddleware(_allRedirect)
      .addHandler(shelf_static.createStaticHandler(rootWeb, defaultDocument: "index.html"));

  io.serve(handler, '127.0.0.1', 8080).then((server) {
    print('Serving at http://${server.address.host}:${server.port}');
  });
}

/**
* 判断文件是否存在:
* 如果文件存在,直接将请求交由 Handler 进行处理;
* 如果文件不存在(可能是 Angular 中的 Route 或者 404错误),
* 将 handlerPath 修改为完整的 URL,交由 Angular 中的路由器处理
*/
shelf.Handler _allRedirect(shelf.Handler handler)
  => (shelf.Request request)
  => handler(
      new File(
          Path.join(rootWeb, request.url.path).replaceFirst(new RegExp(r"[\/\\]$"), "")
      ).existsSync() ? request : request.change(path: request.url.path)
    );

如果你服务端使用的是其他服务器,可以参考 Angular 路由器的 wiki 文档,这里摘录部分内容如下:

Apache

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Nginx

server {
    server_name my-app;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

这样就可以正常刷新页面,或通过地址栏访问了。如果有更好的方法,欢迎大家留言!

本文出自“Dart语言中文社区”,允许转载,转载时请务必以超链接形式标明文章原始出处
本文地址:
http://www.cndartlang.com/490.html

发表评论

登录后才能评论