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é:
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
Faire deux copies du projet
jhipster/backend
etjhipster/frontend
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
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", "*"); ... } }
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 -------------------------------------
Parcourir http://localhost:3000/#/login
Entrée
username:password
admin: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?
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");
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);
...
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.