Separating jhipster back-end and front-end into two projects?

Question

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

Now, I want to run back-end and front-end code on different domains. How c

Answer 1

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.

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()

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.

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

Answer 2

I'm using Jhipster version 4.14.5

• I have copied the following files to a project-forntend folder:

  .bowerrc
  gulp
  pom.xml
  yarn.lock
  gulpfile.js
  readme.md

  bower_components
  .gitattributes
  src/main/web

  bower.json
  .gitignore
  package.json
  target/www

• Then ran:

  yarn install

  bower install

  gulp install

• Then changed to the gulp/config.js file to :

  apiPort: 8081

  uri: 'http://localhost:'

• Then started the project by running:

  gulp serve

Answer 3

In addition to xeorem's answer above, I also had to modify the parse-links-service.js to handle the preflight OPTIONS responses, which don't have the "link" response header:

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(','); 

...

Instead of adding API_URL to app.js, modify Gruntfile.js and add the API_URL to the ngConstants block for both DEV and PROD environments.

Answer 4

You can use CORS filter from Tomcat put dependency in pom.xml:

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

Use whatever version of Tomcat you use.

Add CORS filter initialization in WebConfigurer:

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

put this line in WebConfigurer.onStartup(...) put it as close to the top as possible.

...
initCorsFilter(servletContext, disps);
...

Answer 5

Separating frontend and backend in JHipster application is quite simple. Please follow the steps mentioned below if you want to setup frontend and backend applications separately and individually using JHipster:

1. Create two directories for frontend and backend applications

   • mkdir frontend
   • mkdir backend

2. change your directory to frontend and run the JHipster command to create just frontend module

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

   I'm using mysql for db and JWT for auth and if you want to use websockets you add: "--websocket=spring-websocket"

3. Now, change your directory to the backend and run JHipster command to create just backend module

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

Now, your frontend and backend application are running separately and individually and frontend is coordinating with the backend application via REST API calls.