Question

我在Spring Boot和Angularjs上有一个安全的单页应用程序。 ui应用程序的入口点是http://localhost:8080/和应用程序使用嵌入式Tomcat，在属性文件中没有server.context-path。一切都运行良好，直到我没有在application.yml中设置server.context-path：

服务器： context-path：/ appname

然后我在客户端加载所有.js资源时出错。当我在浏览器中查看开发人员工具时，我跟踪了所有.js资源中的“无法加载资源：服务器响应状态为404（未找到）”等消息。

如何在服务器端设置Angular应用程序使用的静态资源的默认路径？我认为在客户端配置它是错误的方法，必须有一种方法在Spring-Boot端进行。

这是我的代码部分：

的pom.xml

 <build>
        <resources>
            <resource>
                <directory>${project.basedir}/src/main/resources</directory>
            </resource>
            <resource>
                <directory>${project.build.directory}/generated-resources</directory>
            </resource>
        </resources>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

Spring boot app runner：

 @Override
    public void configure(HttpSecurity http) throws Exception {
        http.logout().and().antMatcher("/**").authorizeRequests()
                .anyRequest().authenticated().and().csrf()
                .csrfTokenRepository(csrfTokenRepository()).and()
                .addFilterAfter(csrfHeaderFilter(), CsrfFilter.class);
    }

application.yml

server:
  context-path: /appname

spring:
  resources:
    chain:
      enabled: true

在index.html导入的资源中如下：

<script src="app.js"></script>

app.js

var ticketsApp = angular.module('ticketsApp', [
    'ngRoute',
    'ui.bootstrap',
    'angularUtils.directives.dirPagination'
]).
        config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

                $routeProvider.when('/search', {
                    templateUrl: '/partials/search/search.html',
                    controller: 'SearchController'
                }).when('/stat', {
                    templateUrl: '/partials/stat/stat.html',
                    controller: 'StatController'
                }).when('/admin', {
                    templateUrl: '/partials/admin/admin.html',
                    controller: 'AdminController'
                }).when('/details', {
                    templateUrl: '/partials/search/details/details.html',
                    controller: 'DetailsController'
                }).otherwise('/search');

                $locationProvider.html5Mode(true);

            }]);

Answer 1

我使用thymeleaf来处理我的HTML，因此我可以使用角度常量和$ httpProvider拦截器的组合轻松解决这个问题。

在我的index.html＆lt; head＆gt;中我有：

<script type="text/javascript" th:inline="javascript">
  /*<![CDATA[*/
  var app = {
    contextPath: /*[[@{/}]]*/
  };
  /*]]>*/
</script>

然后，在加载我的app.js之前，我做了：

<script>
  angular.module("root", []).constant("$contextPath", app.contextPath);
</script>

然后，在我的app.js中，我设置了一个http拦截器来改变URL。

angular.module('myapp', [
'root'
'ngRoute'])
  .config(['$httpProvider','$contextPath', function($httpProvider, $contextPath) {
    $httpProvider.interceptors.push(function() {
      return {
        'request': function(config) {
          if (! config.url.startsWith($contextPath)) {
            config.url = $contextPath + config.url;
          }
          return config;
        }
      };
    });
  }]);

这会预先考虑请求的上下文路径。这只是一个初始实现，它需要更智能地处理FQDN等，但它确实有效。

Answer 2

我使用以下信息解决了这个问题：https://docs.angularjs.org/error/ $ location / nobase

我已经调整了Trever Shick的答案。我不使用百里香，所以我使用静态contextPath

angular.module('myapp', [
'root'
'ngRoute'])
  .config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push(function() {
      return {
        'request': function(config) {
          if (! config.url.startsWith("appName")) {
             config.url = "appName" + config.url;
          }
          return config;
        }
      };
    });
  }]);

Spring Boot，Angularjs，更改server.context-path会破坏angularjs app

2 个答案: