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

Posted 2023-02-27

【中文标题】开发过程中的Springboot热重载角度8

【英文标题】：Springboot hot reload angular 8 during development

【发布时间】：2020-05-20 08:28:34

【问题描述】：

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

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

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

【问题讨论】：

为什么要把后端和前端打包在一起？我认为最好将它们分开。您的问题与交叉起源有关吗？请注意，最好在后端应用程序中配置它。

“让他们分开”到底是什么意思？你的意思是在开发过程中还是在产品中。它们是分开的，但最后它们将被打包在同一个JAR 中。我的问题是，如果我单独启动它们（仅在开发期间），那么我会遇到跨源问题。我认为@Florian 的答案是我应该检查的一个很好的解决方案。

对于 CORS 问题，请参阅此。 ***.com/questions/46788969/…

【参考方案1】：

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

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

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

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

将代理配置文件添加到 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"
    
  
,

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

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

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

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

【讨论】：

代理配置的第二部分应该放在哪里？你说，把它放到你的项目中，但你能更具体一点吗？谢谢。

您使用我的回答中提到的内容在您的包 json 旁边创建一个新文件 proxy.conf.json。应该是这样的:)

我尝试了你所说的，但我仍然收到“跨源请求被阻止：同源策略不允许读取localhost:8080/hello 的远程资源。（原因：CORS 标头 'Access-Control-Allow -起源'失踪）。”。您可以查看POC项目hier：github.com/Elio-Shyti/springangular

这可能是因为您仍然向 localhost:8080 发出请求，而（就像我写的那样）您需要针对 localhost:4200（或任何角度网络服务器的端口）执行它们:) 如果你也给我看你的前端项目，我可能会为你指出正确的位置。

您可以为此使用 angulars 环境变量：jvandemo.com/… 您可以定义与 environment.prod.ts 中定义的 URL 不同的开发 URL。或者，更好的是，使您从应用程序查询的 URL 相对于当前 window.location（而不是 lcoalhost:4200/api/example 使用 /api/example），并且应用程序将使用当前 URL 来处理请求。根据您的部署机制，解决方案 1 或 2 可能会更好:)

【参考方案2】：

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

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

【讨论】：

好的，我认为这是一个合理的答案。但我不希望每个开发人员在他的浏览器上做同样的想法。我正在寻找更通用的解决方案。

【参考方案3】：

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

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

控制器方法 CORS 配置

全局 CORS 配置

控制器方法CORS配置

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

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

全局 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");
            
        ;
    

【讨论】：

这也会在生产部署的产品中发送 CORS 标头，这可能不是您想要的，即使这些只是 localhost URL。

对于配置级别，您可以在应用程序中定义环境设置，并基于您可以在 application.yml 文件中定义的环境动态 URL