将jhipster后端和前端分成两个项目？

Question

我正在尝试使用基于令牌的身份验证的jhipster.它完美地运作.

现在,我想在不同的域上运行后端和前端代码.我怎样才能做到这一点？

---

这是我试过的:

1. 运行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
   

2. 将项目的两个副本作为jhipster/backend和jhipster/frontend

3. 从后端和前端删除不需要的文件

   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. 在代码中进行更改以完全删除后端/前端依赖项

   • 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

     删除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. 跑

   • 终端标签#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
      -------------------------------------
     

6. 浏览http:// localhost:3000 /#/ login

   输入username:password为admin:admin

   我们的BACKEND标签显示:

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

---

显然,我做错了什么.它是什么？

Answer 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中用作读取所有头的方法,并查看CORS请求中允许的HTTP方法.

最后,在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");

Answer 2

在 JHipster 应用程序中分离前端和后端非常简单。如果您想使用 JHipster 单独设置前端和后端应用程序，请按照以下步骤操作：

1. 为前端和后端应用程序创建两个目录

   • mkdir 前端
   • mkdir 后端

2. 将目录更改为 frontend 并运行 JHipster 命令来创建前端模块

   • CD前端
   • jhipster --skip-server --db=sql --auth=jwt
   • 如果一切正常，请运行npm start命令来运行您的前端应用程序。

   我使用 mysql 进行数据库，使用 JWT 进行身份验证，如果你想使用 websockets，你可以添加：“--websocket=spring-websocket”

3. 现在，将目录更改为后端并运行 JHipster 命令来创建后端模块

   • cd .. //因为我们当前正在处理后端目录
   • 光盘后端
   • jhipster --跳过客户端
   • 在运行 Spring Boot 应用程序时运行后端应用程序

现在，您的前端和后端应用程序单独运行，并且前端通过 REST API 调用与后端应用程序进行协调。