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 和 grunt 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上，刷新页面将按预期进行。

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

1 个答案: