Горячая перезагрузка Springboot angular 8 во время разработки

Question

Я создаю приложение с помощью Springboot и Angular 8. Я новичок в Springboot. Мой план состоит в том, чтобы создать внешний интерфейс (ng build - который будет вызываться с mvn clean package) внутри src/main/resources.

. Проблема в том, что если я делаю это таким образом, я не могу выполнить горячую перезагрузку, когда некоторые изменения происходят на фронтенде. Есть ли лучшая практика, как построить такое приложение? Мое намерение состоит в том, чтобы упаковать внутренний и внешний интерфейс в один и тот же файл jar, но в то же время мне нужно увидеть измененные файлы в исходном интерфейсе непосредственно в браузере.

С другой стороны, если я начну интерфейс (во время разработки) с ng serve, тогда он не будет работать из-за проблем перекрестного происхождения.

Answer 1

Во время разработки я настоятельно советую вам не связывать фронтенд с бэкэндом (пружинной загрузкой), это сделает вещи намного сложнее и сложнее в разработке. Как я знаю, в весенней загрузке нет способа «горячей перезагрузки» файлов в ресурсах stati c. И даже если, как бы вы сначала перекомпилировали ваш angular проект? Это делается с помощью пакета mvn во время компиляции, а не во время выполнения.

Чтобы решить вашу проблему, я бы сделал следующее:

• Используйте ng serve при разработке веб-интерфейса
• Запустите автономный бэкэнд весенней загрузки (без встроенного веб-интерфейса)

Чтобы справиться с упомянутой вами проблемой CORS, я бы использовал функцию прокси, которую angular предоставляет вне the-box:

1. Добавьте файл конфигурации прокси в раздел serve вашего angular. json:

"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.

Answer 2

Существует два способа устранения проблемы перекрестного происхождения в процессе разработки: Отключите проверку перекрестного происхождения в вашем браузере. Запустите chrome с определенными параметрами, например, Запустите Chrome браузер без CORS или добавьте расширение в ваш браузер, например Chrome расширение

И, конечно, : Не отключайте перекрестную проверку происхождения, когда вы не разрабатываете. Это функция безопасности, защищающая вас от вреда.

Answer 3

Для этого решения вы можете включить источник Cors на стороне сервера в приложении весенней загрузки, чтобы устранить проблему с несколькими источниками.

Вы можете включить совместное использование ресурсов между источниками (CORS) с отдельных контроллеров или глобально. В следующих разделах описывается, как это сделать:

1. Метод контроллера Конфигурация CORS

2. Глобальная конфигурация CORS

   1. Метод контроллера Конфигурация CORS

Вы можете определить аннотацию @CrossOrigin на уровне контроллера.

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

Глобальная конфигурация CORS

JavaConfig Чтобы включить 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");
            }
        };
    }

}