设置 AngularJS 路由时的状态 404答案

【问题标题】：Status 404 when i set an AngularJS route设置 AngularJS 路由时的状态 404
【发布时间】：2017-09-21 00:41:06
【问题描述】：

我是 angularJS 编程新手所以我想在 MVC 应用程序中使用 Angular、Spring boot 和 thymeleaf 作为模板进行编程。

我的工作逻辑如下：所有传入请求首先必须通过Spring security，最后将请求发送到使用thymeleaf 的登录页面。如果连接正确完成，那么 Spring 安全性会将请求返回到 index.html ，在这个级别上，我希望只是角度来路由请求。

当我只使用 ui-router 时，一切正常，但我的网址是这样的 http://localhost: 8090/#!/home 它让我错了，所以我使用 html5Mode 来解决这个问题不幸的是，请求被这样发送回 Spring：http://localhost.com/8090/home 没有找到它们并显示 404 类型的错误

我的配置 SpringSecurity：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    public void globalConfig(AuthenticationManagerBuilder auth, @Qualifier("dataSource") DataSource dataSource) throws Exception{
        auth.jdbcAuthentication()
                .dataSource(dataSource)
                .usersByUsernameQuery("select username as principal, password as credentials, true from users where username = ?")
                .authoritiesByUsernameQuery("select user_username as principal, roles_role as role from users_roles where user_username = ?")
                .rolePrefix("ROLE_");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // Pattern builder

        http
                .csrf().disable()
                .authorizeRequests()
                    .antMatchers("/dist/**","/js/**","/assets/**","/css/**","/public/**").permitAll()
                    .anyRequest()
                        .authenticated()
                            .and()
                .formLogin()
                    .loginPage("/login")
                    .permitAll()
                .defaultSuccessUrl("/")
                    .and()
                .logout()
                    .invalidateHttpSession(true)
                    .logoutUrl("/logout")
                    .permitAll();
    }
}

我的 /templates/login.html 页面：

<!DOCTYPE html>
<html xmlns:th="http://www/thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <title>Connexion</title>
    <link rel="stylesheet" th:href="@{dist/css/bootstrap.css}"/>
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>
    <link rel="stylesheet" th:href="@{css/login.css}"/>

</head>

<body>
<form th:action="@{/login}" method="post">
  <div class="login-form">
     <h1>Guichet unique</h1>
      <div th:if="${param.error}" class="text-warning">Login ou mot de passe incorrect</div>
      <div th:if="${param.logout}" class="text-primary">Vous avez déconnecté</div>
     <div class="form-group ">
       <input type="text" class="form-control" placeholder="Email" name="username" id="UserName"/>
       <i class="fa fa-user"></i>
     </div>
     <div class="form-group log-status">
       <input type="password" class="form-control" placeholder="Password" name="password" id="Passwod"/>
       <i class="fa fa-lock"></i>
     </div>
      <span class="alert">Invalid Credentials</span>
      <a class="link" href="#">Mot de passe oublié?</a>
     <button type="submit" class="log-btn" >Se connecter</button>
   </div>
</form>
</body>
</html>

/static/js/modules/routes/routes.js ：

app.config(['$stateProvider','$urlRouterProvider','$locationProvider',function ($stateProvider, $urlRouterProvider,$locationProvider) {
    //$locationProvider.html5Mode(true);
    $stateProvider
        .state('accueil', {
            url: '/acceuil',
            templateUrl: 'js/modules/Accueil/partials/accueil.html',
            controller: 'AccueilCtrl'
        })
        .state('hello', {
            url: '/hello',
            templateUrl: 'js/modules/Accueil/partials/hello.html',
            controller: 'AccueilCtrl'
        })
    $urlRouterProvider.otherwise('/acceuil');
}]);

【问题讨论】：

标签： angularjs spring spring-boot thymeleaf

【解决方案1】：

我认为您需要静态提供索引文件以避免这种情况。您不想通过 spring 请求匹配代码，您希望让 angular 进行路由并在需要用于填充视图的资源时向服务器发出请求。不妨试试this？

我认为this reply 回答了一个相关问题。

【讨论】：

同样的问题，当我发送localhost:8090/home 类型的请求时，我遇到了意外错误（类型=未找到，状态=404）。
我认为春季指南中的this tutorial repo 可以帮助您走上正轨。