Angular ngRoute 重定向到格式错误 URL

Question

我正在使用 AngularJS 编写 SPA 产品，由使用 NodeJS 的 Express 提供服务。 NodeJS/Express 还为 SPA 提供 API。在生产中，SPA 将位于代理（Apache，或者将来可能是 nginx）的后面——即使没有代理也存在以下问题。 ngRoute用于提供路由。

我最初是在本地测试应用程序，一切正常。我将存储库克隆到测试服务器，但由于某种原因，当我尝试使用该应用程序时 URL 格式不正确。

通常，当页面加载时，应用程序重定向到 localhost:8080/#/home（home 是包罗万象的路由）。但是，在测试服务器上时，它会重定向到 domain.com/#!/home#%2Fhome.

如果我点击 link 应该将 URL 更改为 domain.com/#/quotations（href 设置为相对的，而不是绝对的），我得到 domain.com/#!/home#%2Fquotations。

我的路由器配置：

app.config(['$routeProvider', function($routeProvider){
    // Routes
    $routeProvider
    .when('/home', {
        templateUrl: '/views/home/home.html'
    })
    .when('/staff', {
        templateUrl: '/module/staff/views/staff.html',
        controller: 'staffController',
        controllerAs: 'staff'
    })
    .when('/error', {
        templateUrl: '/views/error/error.html',
        css: '/views/error/error.css'
    })
    .otherwise({
        redirectTo: '/home'
    });
}]);

在我的主要 NodeJS 服务器文件中，我仅使用 web.use(Express.static('public_html')) 设置 Express 以服务包含 SPA 的文件夹 public_html。

我曾尝试将 <base href="/"> 添加到我的 index.html 的头部，但这没有任何区别。 Angular 和 Express 都没有被配置为做任何不同的事情（与默认设置不同）来重写页面 URLs，所以我很困惑问题是什么。

Answer 1

根据您的路由，您应该在 head 标记中使用 <base href="@Url.Content("~/")" />，并在生产中的路由配置中使用 $locationProvider.html5Mode(true); 从 url 中删除 #。

这将解决问题，如果可行，您可以随时恢复基于 angular 的 url 格式以使用 #.

另一种选择是在您的节点配置中使用此代码：

<VirtualHost *:80>
  DocumentRoot "/public_html"
  ServerName domain.com
  ServerAlias www.domain.com
</VirtualHost>

Answer 2

在 angular 1.6 $location 现在添加了一个“！”如果你想删除它，你可以这样做：

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

检查这个问题，可能会有帮助...

Angular ngRoute 重定向到格式错误 URL

Angular ngRoute redirecting to malformed URL

javascript

node.js

express

angularjs

ngroute