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

2019-09-30 14:05:06 阅读：254 来源： 互联网

标签：jhipster java angularjs authentication jwt

我正在尝试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

>在代码中进行更改以完全删除后端/前端依赖项

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

>跑

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

输入用户名：密码为admin：admin

我们的BACKEND标签显示：

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

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

解决方法:

当请求因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方法.我在做同样的事情时遇到了同样的问题.修复非常简单：只需将此行添加到第一个antMatchers条目之前(之前)的com.mycompany.config.SecurityConfiguration.

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

标签：jhipster,java,angularjs,authentication,jwt
来源： https://codeday.me/bug/20190930/1835845.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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