Séparer l'arrière-train de jhipster et l'avant-train en deux projets?

je vais essayer jhipster avec authentification par token. Il fonctionne parfaitement.

Maintenant, je veux exécuter du code back-end et front-end sur différents domaines. Comment puis-je faire cela?


voici ce que j'ai essayé:

  1. Exécuter yo jhipster et sélectionnez authentification basée sur les jetons option:

    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
    
  2. Faire deux copies du projet jhipster/backend et jhipster/frontend

  3. supprimer les fichiers inutiles de l'arrière-fin et de l'avant-fin

    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
    
  4. modifier le code pour supprimer complètement backend / frontend dépendance

    • 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

      Supprimer yeoman-maven-plugin

    • 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", "*");
              ...
          }
      }
      
  5. Exécuter

    • Onglet Terminal #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
      ----------------------------------------------------------
      
    • Onglet Terminal N ° 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
      
    • Onglet Terminal N ° 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
       -------------------------------------
      
  6. Parcourir http://localhost:3000/#/login

    Entrée username:passwordadmin:admin

    Notre BACKEND onglet se lit comme suit:

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

apparemment, je fais quelque chose de mal. Quel est-il?

12
demandé sur musa 2015-03-13 12:07:17

3 réponses

lorsque les requêtes échouent à cause de CORS, il n'y a pas d'erreur visible sur le backend. La requête HTTP réussit en fait, mais est bloquée du côté frontal par javascript. Un message comme celui-ci apparaîtra dans la console 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.

le message d'erreur que vous voyez est en fait lié à l'authentification. Lorsque vous activez CORS, votre JS enverra des requêtes" pré-vol " en utilisant la méthode des OPTIONS HTTP. JHipster n'est pas configuré pour permettre la méthode OPTIONS globalement. Je suis tombé sur cette exactement le même problème moi-même en faisant la même chose que toi. La solution est très simple: il suffit d'ajouter cette ligne à votre com.mycompany.config.SecurityConfiguration précédant immédiatement (avant) le premier antMatchers entrée.

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

cela permet explicitement toutes les requêtes avec la méthode OPTIONS. La méthode OPTIONS est utilisée dans CORS pour lire tous les en-têtes et voir quelles méthodes HTTP sont autorisées dans la requête CORS.

enfin, dans votre classe SimpleCORSFilter, vous devriez aussi ajouter ces les en-têtes:

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");
9
répondu xeorem 2016-06-16 21:04:02

vous pouvez utiliser le filtre CORS de Tomcat mettre la dépendance dans pom.xml:

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

utilisez la version de Tomcat que vous utilisez.

ajouter l'initialisation du filtre de CORS dans 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);
    }

mettre cette ligne dans WebConfigurer.onStartup(...) le placer le plus près possible du sommet.

...
initCorsFilter(servletContext, disps);
...
0
répondu Ondrej Bozek 2015-05-14 10:04:26

en plus de la réponse de xeorem ci-dessus, j'ai aussi dû modifier le service parse-links.js pour gérer les OPTIONS de contrôle en amont des réponses qui n'ont pas le "lien" en-tête de réponse:

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(','); 

...

au lieu D'ajouter API_URL à app.js, modifiez Gruntfile.js et ajouter le API_URL à la ngConstants bloc pour les DEV et PROD environnements.

0
répondu Ben 2015-10-28 10:15:00