开发过程中的Springboot热重载角度8

Question

我正在使用 Springboot 和 Angular 8 创建一个应用程序。我是 Springboot 的新手。我的计划是在src/main/resources 中构建前端（ng build - 将从mvn clean package 调用）。

问题是，如果我这样做，当前端发生一些更改时，我无法热重载。 是否有最佳实践如何构建这样的应用程序？我的意图是将后端和前端打包在同一个jar 文件中，但同时我需要直接在浏览器上查看字体中更改的文件。

另一方面，如果我使用ng serve 启动前端（在开发期间），那么由于跨源问题，它将无法工作。

Answer 1

在开发过程中，我强烈建议您不要将前端与后端（spring boot）捆绑在一起，这会使事情变得更加复杂和难以开发。据我所知，spring boot 无法“热重载”静态资源中的文件。即使，您将如何首先重新编译您的角度项目？这是，使用 mvn 包，在编译时完成，而不是运行时。

为了解决您的问题，我将执行以下操作：

• 在开发前端时使用ng serve
• 独立启动您的 Spring Boot 后端（没有捆绑的前端）

为了解决你提到的 CORS 问题，我会使用代理功能，它提供了开箱即用的 Angular：

1. 将代理配置文件添加到 angular.json 的 serve 部分：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "client:build",
    "proxyConfig": "proxy.conf.json"   <------- proxy config
  },
  "configurations": {
    "production": {
      "browserTarget": "client:build:production"
    }
  }
},

1. 然后，将代理配置添加到您的项目中：

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  }
}

您可能需要根据本地端口设置和其他内容更改配置。当您向http://localhost:4200/api/any/endpoint 发出请求时，它将被代理到http://localhost:8080/api/any/endpoint，而不会违反您浏览器的任何CORS 规则。

然后，您的前端应配置为向其当前所在的域发出请求，或者您可以为产品和开发使用不同的环境文件，您可以在其中简单地更改 URL。

Answer 2

有两种方法可以在开发过程中消除跨域问题： 在浏览器中禁用跨源检查。 使用某些参数启动 chrome，例如Run Chrome browser without CORS 或在浏览器中添加扩展程序，例如Chrome extension

当然：不要在不开发时停用跨源检查。这是一项保护您免受伤害的安全功能。

Answer 3

对于解决方案，您可以在 Spring Boot 应用程序中从服务器端启用 cors origin，这样您的跨域问题就会得到解决。

您可以从单个控制器或全局启用跨域资源共享 (CORS)。以下主题介绍了如何执行此操作：

1. 控制器方法 CORS 配置

2. 全局 CORS 配置

   1. 控制器方法CORS配置

您可以在控制器级别定义@CrossOrigin 注释。

@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)

1. 全局 CORS 配置

Java配置 为整个应用启用 CORS 非常简单：

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

创建应用程序类

package com.example.cors;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SpringBootApplication
public class RestServiceCorsApplication {

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

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/greeting-javaconfig").allowedOrigins("http://localhost:9000");
            }
        };
    }

}