分离jhipster后端和前端为两个项目？ [英] Separating jhipster back-end and front-end into two projects?
问题描述
我想 jhipster ，提供基于令牌的认证。它完美的作品。
I'm trying jhipster with token-based authentication. It works perfectly.
现在，我想运行在不同的领域后端和前端code。我怎样才能做到这一点？
Now, I want to run back-end and front-end code on different domains. How can I do this?
这是我的尝试：
-
运行
哟jhipster并选择基于令牌的认证选项：
Run
yo jhipsterand 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 /后端和 jhipster /前端
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
请在code的变化完全删除后端/前端依赖
-
前端/ Gruntfile.js
...
var parseVersionFromPomXml = function() {
return '1.2.2.RELEASE';
};
...
browserSync: { ..., proxy: "localhost:8081" }
前端/ src目录/主/ web应用/脚本/应用/ app.js
angular.module('jhipsterApp', [...])
.constant('API_URL', 'http://localhost:8080/')
.run( ... )
前端/ src目录/主/ web应用/脚本/ ** / *。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的
删除自耕农 - Maven的插件
Remove yeoman-maven-plugin
后端/ src目录/主/ 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：咕噜的
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
-------------------------------------
输入用户名：密码为管理：系统管理员
我们的 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会送'pre-飞行'使用HTTP OPTIONS方法请求。 JHipster未配置为允许全局OPTIONS方法。我就遇到了这个相同的问题，我自己而做，你做同样的事情。解决方法是非常简单：只需加入这行到你的 com.mycompany.config.SecurityConfiguration 立即preceding（前）第一个 antMatchers 项。
The error message you're 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方法的所有请求。选项方法在CORS作为一种方法来读取所有的头，看看HTTP方法允许在CORS请求。
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后端和前端为两个项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
