Question

我试图删除＆＃39;＃＆＃39;来自URL。我看了很多这样做的例子。几乎所有的例子都遵循我遵循的相同的两个步骤 第1步：启用HTML5模式

.config(function ($routeProvider,$locationProvider){
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl',
    controllerAs: 'main'
  })
  .when('/products/',{
    templateUrl:'views/HomeMain/products.html',
    controller:'MainCtrl',
    controllerAs:'main'
  });   
$locationProvider.html5Mode(true);
})

第2步：添加基准

<head>
  <base href="/">
</head>

按照上述步骤后，我成功删除了＃＆＃39;＃＆＃39;来自网址。
每当我导航到＆＃39;产品＆＃39;页面网址看起来像是http://localhost:9001/products/，这正是我想要的 但是，每当我重新加载产品页面时，此错误都会显示在浏览器窗口中：

Cannot GET /products/

为什么我收到此错误？我该如何处理这个错误？

Answer 1

使用#时，您正在客户端浏览，并且网址永远不会发送到服务器。但是当你使用html5Mode时，你还应该配置服务器端，重写为url并告诉客户端将处理它

对于asp.net，请参阅this

Answer 2

在启用HTML5模式之前，您有一个类似http://localhost:9001/#/products/的网址。请注意，哈希的内容永远不会提交给服务器。所以服务器请求的只是http://localhost:9001。

只要服务器返回响应，并且angular接管控件，它就会看到哈希的/products/片段，并做出相应的反应。

启用HTML5模式后，您的网址将变为http://localhost:9001。然后，您访问产品的路线，这会产生您的网址http://localhost:9001/products/。请注意，由于HTML5模式使用浏览器的历史记录API，因此即使URL（不是哈希片段）发生更改，您的页面也不会完全刷新。

现在，如果刷新页面，服务器收到的是http://localhost:9001/products/，并且由于此路由未在服务器上处理，因此会返回404错误。

为了使其工作，您需要实现逻辑以在访问此路由时返回适当的内容。对于基于节点的应用，您可以关注this answer。

Answer 3

这是因为接收请求的Web服务器会查找与服务器上的完整URL匹配的资源，这是不存在的，因为URL的角度部分指的是角度应用程序中的路径并且需要在客户端浏览器中处理。

如果使用NodeJS / ExpressJS / IIS，您可以执行URL重写。请参阅此博客以获取解决方案： http://jasonwatmore.com/post/2016/07/26/angularjs-enable-html5-mode-page-refresh-without-404-errors-in-nodejs-and-iis

删除＆＃39;＃＆＃39;后，我在页面重新加载时收到错误消息来自AngularJS中的网址

3 个答案: