如何从URL，SpringBoot和AngularJs应用程序中删除＃？

Question

This is my TuckeyRewriteFilter filter class

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);
        }
    }

}

This is my springboot main class

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;
    }
}

This is my urlrewrite.xml this file is from resources folder configuration is works fine, loading login page, but still I have to pass /#login, then it redirect to /login URL, but on browser refresh I ma getting 404 error. index.html, I have added , I don't want extra domain name after my port id.

<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

In your js router file (config phase) you need to add:

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

and in your index.html file, you need to add:

<base href="/">

Update 1

After implementing above on client side, you need to configure url mapping on server side as well. With # , the server ignores whatever is followed after it.

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

So, when you configure angularjs to remove # from URLs, your above request

http://localhost:8080/i_will_be_ignored/and_so_do_i

will now hit server with @path('i_will_be_ignored') . Now, that will give you 404 because you never mapped any API for it. Thats the reason, you are getting 404 on page refresh.

You need to map all the URLs that doesn't match to index.html followed by the unmatched url. Once that's done, angularjs will take it from there and redirects to appropriate route . I hope this will help you.

Something like this will help you out here