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

Posted 2023-02-27

【中文标题】如何从 URL、Spring Boot 和 AngularJs 应用程序中删除 #？

【英文标题】：How to remove # from URL , SpringBoot & AngularJs application?

【发布时间】：2018-11-19 12:39:07

【问题描述】：

这是我的 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>

【问题讨论】：

# 之后的部分不会到达服务器，并且是 Angular 在内部用于路由的部分。您正在尝试在服务器端解决一个不起作用的客户端问题。

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

【讨论】：

在将hashPrefix设置为空白后，我仍然必须在url前缀中输入'#'。

你的意思是你的角度静止路线与# ？

不，它不会路由到“#”，但我必须在 URL 中输入“#”，然后它会通过删除“#”符号重定向到同一页面。

你在哪里“输入”# 在网址中？在spring的xml文件中\?

我必须输入浏览器 URL '#'。例如，如果我必须访问我的登录页面，那么 localhost:8080/#/login > 在输入命中它将重定向到 localhost:8080/login，如果我直接尝试访问 localhost:8080/login，这会将应用程序破坏为 404错误