如何从 URL、Spring Boot 和 AngularJs 应用程序中删除 #？

Question

这是我的 TuckeyRewriteFilter 过滤器类

public class TuckeyRewriteFilter extends org.tuckey.web.filters.urlrewrite.UrlRewriteFilter {

    @Override
    protected void loadUrlRewriter(FilterConfig filterConfig) throws ServletException {
        String confPath = filterConfig.getInitParameter("confPath");
        ServletContext context = filterConfig.getServletContext();
        try {
            final URL confUrl = getClass().getClassLoader().getResource(confPath);
            final InputStream config = getClass().getClassLoader().getResourceAsStream(confPath);
            Conf conf = new Conf(context, config, confPath, confUrl.toString(), false);
            checkConf(conf);
        } catch (Throwable e) {
            throw new ServletException(e);
        }
    }

}

这是我的 springboot 主类

public class AdminWebApplication {

    public static final String REWRITE_FILTER_NAME = "rewriteFilter";
    public static final String REWRITE_FILTER_CONF_PATH = "urlrewrite.xml";

    @Autowired
    ApplicationContext applicationContext;

    public static void main(String[] args) {
        SpringApplication.run(AdminWebApplication.class, args);
    }

    @Bean
    public ObjectMapper createObjectMapper() {
        ObjectMapper objectMapper = new ObjectMapper();
        applicationContext.getAutowireCapableBeanFactory().autowireBean(objectMapper);
        return objectMapper;
    }

    @Bean
    public FilterRegistrationBean rewriteFilterConfig() {
        FilterRegistrationBean reg = new FilterRegistrationBean();
        reg.setName(REWRITE_FILTER_NAME);
        reg.setFilter(new TuckeyRewriteFilter());
        reg.addInitParameter("confPath", REWRITE_FILTER_CONF_PATH);
        reg.addInitParameter("confReloadCheckInterval", "-1");
        reg.addInitParameter("statusPath", "/redirect");
        reg.addInitParameter("statusEnabledOnHosts", "*");
        reg.addInitParameter("logLevel", "WARN");
        return reg;
    }
}

这是我的 urlrewrite.xml 此文件来自资源文件夹 配置工作正常，正在加载登录页面，但我仍然必须传递 /#login，然后它重定向到 /login URL，但在浏览器刷新时我会收到 404 错误。 index.html，我已经添加了，我不想在我的端口号后面加上额外的域名。

<urlrewrite default-match-type="wildcard">
    <rule>
        <from>/login</from>
        <to>/login.html</to>//As of now only configured for login page.
    </rule>
    <rule>
        <from>/contact</from>
        <to>/index.html</to>
    </rule>
</urlrewrite>

Answer 1

在您的 js 路由器文件（配置阶段）中，您需要添加：

$locationProvider.hashPrefix(''); 
$locationProvider.html5Mode(true);

在您的index.html 文件中，您需要添加：

<base href="/">

更新 1

在客户端实现上述后，您还需要在服务器端配置url映射。使用 # ，服务器将忽略其后的任何内容。

http://localhost:8080/#i_will_be_ignored/and_so_do_i

因此，当您配置 angularjs 以从 URL 中删除 # 时，您的上述请求

http://localhost:8080/i_will_be_ignored/and_so_do_i

现在将使用 @path('i_will_be_ignored') 访问服务器。现在，这会给你404，因为你从来没有为它映射过任何 API。这就是原因，您在页面刷新时收到404。

您需要将所有不匹配的 URL 映射到 index.html，后跟不匹配的 url。完成后，angularjs 将从那里获取并重定向到适当的 route 。我希望这会对你有所帮助。

Something like this will help you out here