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

时间:2023-01-13
本文介绍了将 jhipster 后端和前端分成两个项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试 jhipster 使用基于令牌的身份验证.效果很好.

I'm trying jhipster with token-based authentication. It works perfectly.

现在,我想在不同的域上运行后端和前端代码.我该怎么做?

这是我尝试过的:

  1. 运行 yo jhipster 并选择基于令牌的身份验证选项:

  1. Run yo jhipster and select token-based authentication 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

  • 将项目复制为 jhipster/backendjhipster/frontend

  • Make two copies of the project as jhipster/backend and 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
    

  • 更改代码以完全消除后端/前端依赖关系

    • 前端/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.
    

  • 后端/pom.xml

    删除 yeoman-maven-plugin

    Remove 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", "*");
            ...
        }
    }
    

  • 运行

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

    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 as admin:admin

    我们的 BACKEND 标签显示:

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

    <小时>

    显然,我做错了什么.这是什么?


    Apparently, I'm doing something wrong. What is it?

    推荐答案

    当请求由于 CORS 失败时,后端没有可见的错误.HTTP 请求实际上成功了,但是在前端被 javascript 阻止了.JS 控制台中会出现类似这样的消息.

    When requests fail due to CORS, there is no visible error on the backend. The HTTP request actually succeeds, but is blocked on the front-end side by javascript. A message like this one will appear in the JS console.

    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 条目.

    The error message you're seeing is actually related to authentication. When you enable CORS, your JS will send ''pre-flight'' requests using the HTTP OPTIONS method. JHipster isn't configured to allow the OPTIONS method globally. I ran into this exact same problem myself while doing the same thing you did. The fix is very simple: just add this line to your com.mycompany.config.SecurityConfiguration immediately preceding (before) the first antMatchers entry.

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

    这将明确允许使用 OPTIONS 方法的所有请求.OPTIONS 方法在 CORS 中用作读取所有标头并查看 CORS 请求中允许使用哪些 HTTP 方法的一种方式.

    This will explicitly allow all requests with the OPTIONS method. The OPTIONS method is used in CORS as a way to read all of the headers and see what HTTP methods are allowed in the CORS request.

    最后,在您的 SimpleCORSFilter 类中,您还应该添加这些标题:

    Finally, in your SimpleCORSFilter class, you should also add these headers:

    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");
    

    这篇关于将 jhipster 后端和前端分成两个项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!

    上一篇:多个WebSecurityConfigurerAdapters:spring security中的JWT认 下一篇:使用 Apple Java 用户验证登录

    相关文章

    最新文章