Question

我在我的角应用程序中使用Angular UI路由器，并且我已启用HTML5模式，通过在配置中使用$ locationProvider来删除#form的URL。

var app = angular.module('openIDC', ['ui.router']);
app.config(function($urlRouterProvider, $stateProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'views/home.html',
        controller: 'HomeController'
    })
    .state('login', {
        url: '/login', 
        templateUrl: 'views/login.html',
        controller: 'LoginController'
    })
});

我也在index.html文件中设置了<base href="/" />标记。路由工作正常，我可以导航到页面并删除＃但是当我使用浏览器上的重新加载按钮刷新页面时，会出现404错误响应。

enter image description here

为什么会发生这种情况，如何解决这个问题并启用HTML5模式以获得正确的网址

Answer 1

您需要在服务器端设置url重写

对于apache，它会是这样的：

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html

<{1>}文件中的

（确保已启用.htaccess apache模块）

并为nginx配置如下：

mod_rewrite

Answer 2

注意到关于IIS的评论 - 但是还没有在这里看到它 - 但这就是我的工作方式。确保安装了URL Rewrite 2.0。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<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>
</configuration>`

Answer 3

首先制作.htaccess文件，然后复制这些代码

<ifModule mod_rewrite.c>
     RewriteEngine on

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


    RewriteRule ^ your root folder/index.html [L]
      </ifModule>


<base url="/"></base> in index.html file

Answer 4

不能详细解释为什么会发生这种情况，但我可以用一种方式来描述你解决这个问题的方法。所以我使用UrlRewriterFilter作为我的SpringMvc后端。 Angular通用模块配置：

var app = angular.module('ilonaChatGeneralModule', 
    [
        'ui.router'
    ]);

app.config(function($locationProvider){
    $locationProvider.html5Mode(true);
});

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    var home = ['/', {
        url: '/',
        templateUrl: 'views/userlist.html'
    }];

    var login = ['login', {
        url: '/login',
        templateUrl: 'views/login.html'
    }];

    var privateRoom = ['privateroom', {
        url: '/privateroom',
        templateUrl: 'views/privateroom.html'
    }];

    $stateProvider
        .state(home)
        .state(login)
        .state(privateRoom)
        ;
});

我的主页index.html：

<html ng-app="ilonaChatGeneralModule"  ng-controller="ilonaChatGeneralCtrl">
<head>
    <base href="/">
    ...

</head>
<body>
<div>
    <div ui-view=""></div>
</div>
</body>
</html>

这是前端。对于后端，我使用了UrlRewriteFilter，你可以通过以下maven依赖来获得它：

  <dependency>
        <groupId>org.tuckey</groupId>
        <artifactId>urlrewritefilter</artifactId>
        <version>4.0.3</version>
    </dependency>

我已经以下一种方式将它添加到我的SpringMVC WebAppInitializer中：

    package com.sbk.config;

    import org.springframework.context.ApplicationContext;
    import org.springframework.web.context.ContextLoaderListener;
    import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
    import org.springframework.web.filter.CharacterEncodingFilter;
    import org.springframework.web.servlet.DispatcherServlet;
    import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
    import org.tuckey.web.filters.urlrewrite.UrlRewriteFilter;

    import javax.servlet.*;
    import java.nio.charset.StandardCharsets;
    import java.util.EnumSet;

    public class WebAppInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {   
        private static final String URL_REWRITE_FILTER_NAME = "urlRewrite";
        private static final String URL_REWRITE_FILTER_MAPPING = "/*";

...
        @Override
        public void onStartup(ServletContext servletContext) throws ServletException {
            super.onStartup(servletContext);

            FilterRegistration.Dynamic urlReWrite = servletContext.addFilter(URL_REWRITE_FILTER_NAME, new UrlRewriteFilter());
            EnumSet<DispatcherType> urlReWriteDispatcherTypes = EnumSet.of(DispatcherType.REQUEST, DispatcherType.FORWARD);
            urlReWrite.addMappingForUrlPatterns(urlReWriteDispatcherTypes, true, URL_REWRITE_FILTER_MAPPING);
        }
    }

此过滤器需要在您的WEB-INF目录下的urlrewrite.xml文件（似乎在可配置但默认位置 - 此处）。该文件的内容：

<!DOCTYPE urlrewrite
        PUBLIC "-//tuckey.org//DTD UrlRewrite 2.6//EN"
        "http://www.tuckey.org/res/dtds/urlrewrite2.6.dtd">

<urlrewrite>

    <rule>
        <from>/login$</from>
        <to>index.html</to>
    </rule>

    <rule>
        <from>/privateroom$</from>
        <to>index.html</to>
    </rule>

</urlrewrite>

我没有仔细阅读手册，但我怀疑这个想法是当你用http://yourhost:xxxx/privateroom你的应用程序刷新浏览器时尝试找到物理现有的视图http://yourhost:xxxx/privateroom。但它缺席了。当您将其重定向到您的基页时，angular将使用其状态定义构建到物理文件的正确链接。我可以在理论上犯错，但它在实践中有效

Answer 5

如果无法配置服务器，请使用以下内容配置web.xml，以便在用户位于html5推送路径时处理刷新。

C:\Users>az --help

For version info, use 'az --version'

Group
    az

Subgroups:
    account   : Manage subscriptions.
    acs       : Manage Azure Container Services.
    ad        : Synchronize on-premises directories and manage Azure Active Directory resources.
    appservice: Manage your Azure Web apps and App Service plans.
    batch     : Manage Azure Batch.
    cloud     : Manage the registered Azure clouds.
    component : Manage and update Azure CLI 2.0 (Preview) components.
    container : Set up automated builds and deployments for multi-container Docker applications.
    disk      : Manage Azure Managed Disks.
    documentdb: Manage your Azure DocumentDB (NoSQL) database accounts.
    feature   : Manage resource provider features, such as previews.
    group     : Manage resource groups and template deployments.
    image     : Manage custom Virtual Machine Images.
    iot       : Connect, monitor, and control millions of IoT assets.
    keyvault  : Safeguard and maintain control of keys, secrets, and certificates.
    lock      : Manage Azure locks.
    network   : Manages Azure Network resources.
    policy    : Manage resource policies.
    provider  : Manage resource providers.
    redis     : Access to a secure, dedicated cache for your Azure applications.
    resource  : Manage Azure resources.
    role      : Use role assignments to manage access to your Azure resources.
    snapshot  : Manage point-in-time copies of managed disks, native blobs, or other snapshots.
    sql       : Manage Azure SQL Databases and Data Warehouses.
    storage   : Durable, highly available, and massively scalable cloud storage.
    tag       : Manage resource tags.
    vm        : Provision Linux or Windows virtual machines in seconds.
    vmss      : Create highly available, auto-scalable Linux or Windows virtual machines.

Commands:
    configure : Configure Azure CLI 2.0 Preview or view your configuration. The command is
                interactive, so just type `az configure` and respond to the prompts.
    feedback  : Loving or hating the CLI?  Let us know!
    find      : Find Azure CLI commands based on a given query.
    login     : Log in to access Azure subscriptions.
    logout    : Log out to remove access to Azure subscriptions.

Answer 6

最简单的方法是：

在index.html中使用<base href="/admin/"></base>

我正在为我的管理页面执行此操作

使用启用了Html5模式的Angular Ui Router时，页面重新加载失败

6 个答案: