将jhipster后端和前端分成两个项目？
我正在尝试使用基于令牌的身份validation的jhipster 。 它完美地运作。
现在， 我想在不同的域上运行后端和前端代码 。 我怎样才能做到这一点？
这是我试过的：
-
运行
yo jhipster并选择基于令牌的身份validation选项：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.jsangular.module('jhipsterApp', [...]) .constant('API_URL', 'http://localhost:8080/') .run( ... ) -
frontend/src/main/webapp/scripts/**/*.service.jsangular.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
输入
username:password为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.
您看到的错误消息实际上与身份validation有关。 当您启用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");
您可以使用Tomcat中的CORSfilter将依赖项放在pom.xml ：
org.apache.tomcat tomcat-catalina 8.0.15 provided
使用您使用的任何版本的Tomcat。
在WebConfigurer添加CORSfilter初始化：
private void initCorsFilter(ServletContext servletContext, EnumSet disps) { log.debug("Registering CORS Filter"); FilterRegistration.Dynamic corsFilter = servletContext.addFilter("corsFilter", new CorsFilter()); Map 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); }
将此行放在WebConfigurer.onStartup(...)尽可能靠近顶部。
... initCorsFilter(servletContext, disps); ...
除了xeorem上面的答案，我还必须修改parse-links-service.js来处理预检OPTIONS响应，它们没有“链接”响应头：
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(','); ...
不要将API_URL添加到app.js，而是修改Gruntfile.js并将API_URL添加到DEV和PROD环境的ngConstants块中。