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

Posted 2023-02-19

【中文标题】如何在 Wildfly 上使用 Angular 7 单页应用程序避免 404 错误

【英文标题】：How to avoid 404 error with Angular 7 Single Page Application on Wildfly

【发布时间】：2019-06-15 05:03:07

【问题描述】：

我有一个前端项目，它是使用 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 吗？

【问题讨论】：

你看到了吗：angular.io/guide/deployment#server-configuration

好的@DeborahK，也许nginx可以帮助我解决这个问题。我会进行一些测试并很快带来结果。

【参考方案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 上正常部署它，并且刷新页面将按预期工作。

【讨论】：

我尝试了一切，但没有任何效果。无论我尝试什么，总是得到 404 或 500。最后将welcome-file 设置为index.html 和error-page.location 设置为/index.html 解决了这些问题。我只是不明白为什么一个人需要与另一个人不同的路径。谢谢你

【参考方案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>