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

Question

我正在使用基于令牌的身份验证来尝试jhipster。它工作得很完美。

现在，我想在不同的域上运行后端和前端代码。我该怎么做？

这就是我试过的：

1. 运行并选择基于令牌的身份验证选项： 欢迎来到JHipster生成器？(1/13)您的应用程序的基本名称是什么？jhipster？(2/13)您默认的Java包名是什么？com.mycompany.myapp？(3/13)您想使用Java 8吗？是的(使用Java 8)？(4/13)您希望使用哪种类型的身份验证？基于令牌的身份验证(无状态，带有令牌)？(5/13)您希望使用哪种类型的数据库？SQL (H2，MySQL，PostgreSQL)？(6/13)您想使用哪个生产数据库？MySQL？(7/13)您希望使用哪个*开发*数据库？带网络控制台的H2内存中？(8/13)您想使用Hibernate二级缓存吗？是的，对于ehcache (本地缓存，用于单个节点)？(9/13)要使用集群HTTP会话吗？不是吗？(10/13)你想使用WebSockets吗？不是吗？(11/13)您想使用Maven或Gradle来构建后端吗？Maven (推荐)？(12/13)您希望使用Grunt还是Gulp.js来构建前端？Grunt (推荐)？(13/13)您想使用Compass CSS创作框架吗？不..。我完事了。运行bower安装& npm为您安装^C
2. jhipster/backend 制作了该项目的两个副本，分别为和
3. 从后端和前端删除不必要的文件。 rm -rf后端/..bowerrc -rf后端/..jshintrc rm -rf后端/Bower.json rm -rf后端/Gruntfile.js rm -rf后端/Package.json rm -rf后端/src/main/main/webapp rm -rf后端/src/test/javascript rm -rf前端/pu.xml rm -rf前端/src/main/java rm -rf前端/src/主/ rm -rf前端/src/test/gatling rm -rf趋向/src/test/ -rf前端/src/test/
4. 对代码进行更改以完全删除后端/前端依赖项

- `frontend/Gruntfile.js`

...变量parseVersionFromPomXml =函数(){返回'1.2.2.RELEASE'；}；browserSync：{.，代理："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('Account'，函数帐户($resource，API_URL) {返回$resource(API_URL +‘api/account，{}，{…})；} //对所有服务文件进行类似的更改。

- backend/pom.xml

删除yeoman maven-plugin

- backend/src/main/java/com/mycompany/myapp/SimpleCORSFilter.java

//从这里复制：https://spring.io/guides/gs/rest-service-cors/ @Component public class SimpleCORSFilter实现筛选器{ public void doFilter(.){.response.setHeader("Access-Control-Allow-Origin"，"*")；}

​

1. Run

- Terminal Tab #1: _BACKEND_

光盘后端mvn弹簧-引导:运行.INFO com.mycompany.myapp.Application -在11.529秒内启动应用程序(JVM运行12.079)信息访问URL:本地：http://127.0.0.1:8080外部：http://192.168.56.1:8080

-终端选项卡#2:前端

cd前端/src/main/webapp npm安装-g http-server http-server启动http- server，serving ./ on：http://0.0.0.0:8081按CTRL-C停止服务器

-终端选项卡#3:咕噜

光盘前端安装npm安装槽服务.BS代理：http://localhost:8081 BS访问URL：？

​

1. 浏览http://localhost:3000/#/login 输入username:password作为admin:admin 我们的后端选项卡如下： 调试com.mycompany.myapp.security.Http401UnauthorizedEntryPoint -预认证入口点调用.拒绝存取

显然，我做错了什么。那是什么？

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选项方法发送‘预飞行’请求。JHipster未配置为允许全局选项方法。我在做你做的同样的事情时也遇到了同样的问题。修复非常简单:只需将这一行添加到紧接第一个antMatchers条目之前的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 frontend
- mkdir backend

​

1. 将您的目录更改为前端，并运行JHipster命令以创建公正的前端模块

- cd frontend
- jhipster --skip-server --db=sql --auth=jwt
- if all works fine, run **`npm start`** command to run your frontend application.  

我将mysql用于db，JWT用于auth，如果您想使用websocket，则添加：“-websocket=”

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

- cd .. //as we are ing backend directory currently
- cd backend
- jhipster --skip-client
- Run your backend application as you run your spring boot application

​

现在，前端和后端应用程序分别单独运行，前端通过REST调用与后端应用程序进行协调。

Answer 3

您可以使用Tomcat的CORS过滤器。将Tomcat依赖项放在pom.xml中

   <dependency>
        <groupId>org.apache.tomcat</groupId>
        <artifactId>tomcat-catalina</artifactId>
        <version>8.0.15</version>
        <scope>provided</scope>
    </dependency>

使用您使用的Tomcat的任何版本。

在WebConfigurer中添加CORS过滤器初始化

private void initCorsFilter(ServletContext servletContext, EnumSet<DispatcherType> disps) {
        log.debug("Registering CORS Filter");
        FilterRegistration.Dynamic corsFilter = servletContext.addFilter("corsFilter", new CorsFilter());
        Map<String, String> 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);
...