Разделение интерфейсов ihipster и front-end на два проекта?

Я пытаюсь jhipster с аутентификацией на основе токенов. Он отлично работает.

Теперь Я хочу запустить внутренний и внешний код в разных доменах. Как я могу это сделать?


Это то, что я пробовал:

  • Запустите yo jhipster и выберите параметр проверки подлинности на основе токенов:

    Welcome to the JHipster Generator
    
    ? (1/13) What is the base name of your application? jhipster
    ? (2/13) What is your default Java package name? com.mycompany.myapp
    ? (3/13) Do you want to use Java 8? Yes (use Java 8)
    ? (4/13) Which *type* of authentication would you like to use? Token-based authentication (stateless, with a token)
    ? (5/13) Which *type* of database would you like to use? SQL (H2, MySQL, PostgreSQL)
    ? (6/13) Which *production* database would you like to use? MySQL
    ? (7/13) Which *development* database would you like to use? H2 in-memory with Web console
    ? (8/13) Do you want to use Hibernate 2nd level cache? Yes, with ehcache (local cache, for a single node)
    ? (9/13) Do you want to use clustered HTTP sessions? No
    ? (10/13) Do you want to use WebSockets? No
    ? (11/13) Would you like to use Maven or Gradle for building the backend? Maven (recommended)
    ? (12/13) Would you like to use Grunt or Gulp.js for building the frontend? Grunt (recommended)
    ? (13/13) Would you like to use the Compass CSS Authoring Framework? No
    
    ...
    
    I'm all done. Running bower install & npm install for you
    ^C
    
  • Сделайте две копии проекта как jhipster/backend и jhipster/frontend

  • Удалять ненужные файлы из внутренних и внешних интерфейсов

    rm -rf backend/.bowerrc
    rm -rf backend/.jshintrc
    rm -rf backend/bower.json
    rm -rf backend/Gruntfile.js
    rm -rf backend/package.json
    rm -rf backend/src/main/webapp
    rm -rf backend/src/test/javascript
    
    rm -rf frontend/pom.xml
    rm -rf frontend/src/main/java
    rm -rf frontend/src/main/resources
    rm -rf frontend/src/test/gatling
    rm -rf frontend/src/test/java
    rm -rf frontend/src/test/resources
    
  • Внесите изменения в код, чтобы полностью удалить зависимость backend/frontend

    • frontend/Gruntfile.js

      ...
      var parseVersionFromPomXml = function() {
          return '1.2.2.RELEASE';
      };
      ...
      browserSync: { ..., proxy: "localhost:8081" }
      
    • frontend/src/main/webapp/scripts/app/app.js

      angular.module('jhipsterApp', [...])
      .constant('API_URL', 'http://localhost:8080/')
      .run( ... )
      
    • frontend/src/main/webapp/scripts/**/*.service.js

      angular.module('jhipsterApp').factory(..., API_URL) {
          return $http.post(API_URL + 'api/authenticate', ...);
      }
      
      angular.module('jhipsterApp').factory('Account', function Account($resource, API_URL) {
          return $resource(API_URL + 'api/account', {}, {...});
      }
      
      // Make similar changes in all service files.
      
    • backend/pom.xml

      Удалите модуль yoman-maven

    • backend/src/main/java/com/mycompany/myapp/SimpleCORSFilter.java

      // Copied from here: https://spring.io/guides/gs/rest-service-cors/
      
      @Component
      public class SimpleCORSFilter implements Filter {
          public void doFilter(...) {
              ...
              response.setHeader("Access-Control-Allow-Origin", "*");
              ...
          }
      }
      
  • Run

    • Вкладка терминала # 1: BACKEND

      cd backend
      mvn spring-boot:run
      
      ...
      [INFO] com.mycompany.myapp.Application - Started Application in 11.529 seconds (JVM running for 12.079)
      [INFO] com.mycompany.myapp.Application - Access URLs:
      ----------------------------------------------------------
              Local:          http://127.0.0.1:8080
              External:       http://192.168.56.1:8080
      ----------------------------------------------------------
      
    • Вкладка терминала # 2: FRONTEND

      cd frontend/src/main/webapp
      npm install -g http-server
      http-server
      
      Starting up http-server, serving ./ on: http://0.0.0.0:8081
      Hit CTRL-C to stop the server
      
    • Вкладка терминала 3: GRUNT

      cd frontend
      bower install
      npm install
      grunt serve
      
      ...
      [BS] Proxying: http://localhost:8081
      [BS] Access URLs:
       -------------------------------------
             Local: http://localhost:3000
          External: http://10.34.16.128:3000
       -------------------------------------
                UI: http://localhost:3001
       UI External: http://10.34.16.128:3001
       -------------------------------------
      
  • Обзор http://localhost:3000/#/login

    Введите username:password в качестве admin:admin

    На вкладке BACKEND:

    [DEBUG] com.mycompany.myapp.security.Http401UnauthorizedEntryPoint - Pre-authenticated entry point called. Rejecting access
    

Видимо, я делаю что-то неправильно. Что это?

Ответ 1

Когда запросы терпят неудачу из-за CORS, на сервере нет видимой ошибки. HTTP-запрос на самом деле преуспевает, но заблокирован на стороне интерфейса javascript. Такое сообщение появится в консоли JS.

XMLHttpRequest cannot load http://localhost:8080/api/authenticate. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

Сообщение об ошибке, которое вы видите, фактически связано с аутентификацией. Когда вы включите CORS, ваш JS отправит "предполетные" запросы с использованием метода HTTP OPTIONS. JHipster не настроен для разрешения метода OPTIONS глобально. Я столкнулся с этой самой проблемой, выполняя то же самое, что и вы. Исправление очень просто: просто добавьте эту строку в свой com.mycompany.config.SecurityConfiguration, непосредственно предшествующий (прежде) первый элемент antMatchers.

.antMatchers(org.springframework.http.HttpMethod.OPTIONS, "/api/**").permitAll()

Это явно разрешит все запросы с помощью метода OPTIONS. Метод OPTIONS используется в CORS как способ прочитать все заголовки и посмотреть, какие HTTP-методы разрешены в запросе CORS.

Наконец, в вашем классе SimpleCORSFilter вы также должны добавить эти заголовки:

response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "86400"); // 24 Hours
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, x-auth-token");

Ответ 2

В дополнение к вышеописанному аргументу, я также должен был изменить parse-links-service.js для обработки ответов опций OPTIONS, которые не имеют заголовка ответа "link":

var links = {};
if (!angular.isObject()) {
    // CORS OPTIONS responses
    return links;
}

if (header.length == 0) {
    throw new Error("input must not be of zero length");
}

// Split parts by comma
var parts = header.split(','); 

...

Вместо добавления API_URL в app.js, измените Gruntfile.js и добавьте API_URL в блок ngConstants для сред DEV и PROD.

Ответ 3

Вы можете использовать фильтр CORS из зависимости от Tomcat в pom.xml:

   <dependency>
        <groupId>org.apache.tomcat</groupId>
        <artifactId>tomcat-catalina</artifactId>
        <version>8.0.15</version>
        <scope>provided</scope>
    </dependency>

Используйте любую версию Tomcat, которую вы используете.

Добавить инициализацию фильтра CORS в WebConfigurer:

private void initCorsFilter(ServletContext servletContext, EnumSet<DispatcherType> disps) {
        log.debug("Registering CORS Filter");
        FilterRegistration.Dynamic corsFilter = servletContext.addFilter("corsFilter", new CorsFilter());
        Map<String, String> parameters = new HashMap<>();
        parameters.put("cors.allowed.headers", "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization");
        parameters.put("cors.allowed.methods", "GET,POST,HEAD,OPTIONS,PUT,DELETE");
        corsFilter.setInitParameters(parameters);
        corsFilter.addMappingForUrlPatterns(disps, false, "/*");
        corsFilter.setAsyncSupported(true);
    }

поместите эту строку в WebConfigurer.onStartup(...) как можно ближе к вершине.

...
initCorsFilter(servletContext, disps);
...

Ответ 4

Я использую Jhipster версии 4.14.5

  • Я скопировал следующие файлы в папку project-forntend:

    .bowerrc
    глоток
    pom.xml
    yarn.lock
    gulpfile.js
    readme.md

    bower_components
    .gitattributes
    SRC/главная/веб

    bower.json
    .gitignore
    package.json
    мишень/WWW

  • Затем побежал:

    пряжа установить

    установка беседки

    залп установить

  • Затем изменили файл gulp/config.js на:

    apiPort: 8081

    uri: ' http://localhost :'

  • Затем запустил проект, запустив:

    глоток

Ответ 5

Разделение внешнего интерфейса и внутреннего интерфейса в приложении JHipster довольно просто. Пожалуйста, следуйте инструкциям, указанным ниже, если вы хотите настроить интерфейсные и серверные приложения отдельно и индивидуально с помощью JHipster:

  1. Создайте две директории для фронтэнда и бэкэнда

    • Mkdir интерфейс
    • бэкэнд mkdir
  2. измените каталог на интерфейс и выполните команду JHipster, чтобы создать только модуль интерфейса

    • CD-интерфейс
    • jhipster --skip-сервер --db = sql --auth = jwt
    • если все работает нормально, запустите команду npm start чтобы запустить приложение внешнего интерфейса.

    Я использую mysql для БД и JWT для аутентификации, и если вы хотите использовать веб-сокеты, вы добавляете: "--websocket = spring-websocket"

  3. Теперь измените ваш каталог на backend и выполните команду JHipster, чтобы создать только модуль backend

    • cd..//как мы сейчас используем бэкэнд-каталог
    • бэкэнд
    • jhipster --skip-клиент
    • Запустите ваше бэкэнд-приложение при запуске весеннего загрузочного приложения.

Теперь ваше внешнее и внутреннее приложения работают отдельно и индивидуально, а внешний интерфейс координирует свои действия с внутренним приложением через вызовы REST API.