angularjs - html5mode 的行为不像预期的那样答案

【问题标题】：angularjs - html5mode is not behavior as expectedangularjs - html5mode 的行为不像预期的那样
【发布时间】：2016-08-05 13:44:36
【问题描述】：

我正在尝试使用 html5mode。我是这样使用的：

我正在使用'base'标签，在'head'标签中的'/'上设置了href（不能用HTML写这个......）

我的主要模块正在如下处理路线：

angular.module('MyChef', [
    'Authentication',
    'Home',
    'UserArea',
    'ngRoute',
    'ngCookies'
])

.config(['$routeProvider', '$locationProvider', function ($routeProvider,$locationProvider) {

    $routeProvider
        .when('/login', {
            controller: 'LoginController',
            templateUrl: 'modules/authentication/views/login.html'
        })

        .when('/', {
            controller: 'HomeController',
            templateUrl: 'modules/home/views/home.html'
        })

        .when('/home', {
            controller: 'HomeController',
            templateUrl: 'modules/home/views/home.html'
        })


        .when('/user-area', {
            controller: 'UserAreaController',
            templateUrl: 'modules/user-area/views/user-area.html'
        })


        .otherwise({ redirectTo: '/' });

        $locationProvider.html5Mode({
                     enabled: true,
                     requireBase: false,
        });
}]).run(//doesn't matter I guess...);

如您所见，我正在尝试使用设置为“false”的“requireBase”来忽略路径中的哈希，但它不起作用。

我的 nginx 配置文件：

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/site/public;

    server_name mychefake.com.br;


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


  location /api {
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#    proxy_set_header X-Forwarded-Port 443; #this is important for Catalyst Apps!
      rewrite /api(.*) /$1  break;
    proxy_pass http://localhost:5000; #changed from http://localhost:5000/
  }


}

行为：

当我访问类似：http://localhost

我被重定向到“/login”（如果我没有登录）。没关系！

但是，如果我尝试在不带“#”的情况下重新加载此页面，我的脸上就会出现 404 页面。为什么？

我想我需要对 nginx 配置文件做一些事情（也许是重写）。我是对的还是可以直接在 AngularJS 上执行此操作？

谢谢！

【问题讨论】：

标签： angularjs nginx url-rewriting routes

【解决方案1】：

发生这种情况是因为当您将请求发送到服务器时，它不知道您请求的文件不存在，并且路由发生在前端。您必须修改您的.htaccess，以便将所有请求路由到一个文件。

RewriteEngine On
Options FollowSymLinks

RewriteBase /

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

【讨论】：

嗯，文件存在(index.html ?!?) 存在！但我可能不完全理解你在说什么（对不起！）。无论如何，我不知道如何在 nginx 上重现这个 apache 命令（ RewriteRule 例外）。正在研究...

【解决方案2】：

nginx 配置文件中的位置会话：

 rewrite ^/login /#login redirect;
 rewrite ^/user-area /#user-area redirect;

这行得通！但不是最好的方法（实际上是一种愚蠢的方法）。我需要一个更好的解决方案。我已经尝试过重写条件，但 nginx 正在“大喊大叫”：D。别人？

【讨论】：