如何在 Wildfly 上使用 Angular 7 单页应用程序避免 404 错误

Question

我有一个使用 Angular 7 构建的单页应用程序 (SPA) 前端项目，它使用托管在 Wildfly 上的 Java REST API（还有其他项目在同一台服务器上）。我们最近将此 SPA 从 Apache 移至 Wildfly，以便在 HTTPS 下为其提供服务。一切正常，除非用户点击 F5 或以任何其他方式刷新页面；在这种情况下，他或她会陷入 404 错误，因为 SPA 期望导航始终保持在 index.html。

例如，如果我访问 [server:port]/myspa 它会正确加载并将我重定向到 [server:port]/myspa/login 。但是如果我已经在 [server:port]/myspa/login 并刷新页面，我会卡在 404.

我已经在 standalone.xml 中尝试了一些配置但没有用，比如在 undertow 中设置过滤器如下所示的子系统：

<subsystem xmlns="urn:jboss:domain:undertow:4.0">
    ...
    <server name="default-server">
        ...
        <host name="default-host" alias="localhost">
            ...
            <filter-ref name="spa-to-index" predicate="equals(%s,404)" />            
        </host>
    </server>
    ...
    <filters>
        ...        
        <rewrite name="spa-to-index" redirect="true"
            target="http://localhost:8080/myspa/" />
    </filters>
</subsystem>

有谁知道如何将 [server:port]/myspa/* 的请求重定向到 index.html？

Answer 1

我发现解决这个问题的一个简单方法是：安装 grunt.js 和 g运行t war 。

npm install -g grunt -cli
npm install grunt-war --save-dev

使用以下内容在项目的根文件夹中创建 Gruntfile.js 文件（不要忘记将出现的 [myapp] 替换为您自己的项目信息）

module.exports = function ( grunt ) {
    grunt.loadNpmTasks( 'grunt-war' );

    var taskConfig = {
        war: {
            target: {
                options: {
                    war_verbose: true,
                    war_dist_folder: 'warFile',   // Folder path seperator added at runtime. 
                    war_name: '[myapp]',      // .war will be appended if omitted 
                    webxml_welcome: 'index.html',
                    webxml_webapp_extras: ['<error-page><location>/index.html</location></error-page>'], 
//redirect the errors pages to index.html
                    webxml_display_name: '[myapp]'
                },
                files: [
                    {
                        expand: true,
                        cwd: 'dist/[myapp]', //the folder where the project is located
                        src: ['**'],
                        dest: ''
                    }
                ]
            }
        }
    };

    grunt.initConfig( taskConfig );
};

然后运行命令：

grunt war

这会将 Angular 应用程序打包到一个 .war 文件中，您可以在 Wildfly 上正常部署它，刷新页面将按预期工作。

Answer 2

不需要咕哝。只需将此内容添加到 WEB-INF/web.xml

    <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
     version="4.0">
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

如何在 Wildfly 上使用 Angular 7 单页应用程序避免 404 错误

How to avoid 404 error with Angular 7 Single Page Application on Wildfly

single-page-application

wildfly

angular