Разделение интерфейсов ihipster и front-end на два проекта?

Ответ 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 OPTIONS. JHipster не настроен для разрешения метода OPTIONS глобально. Я столкнулся с этой самой проблемой, выполняя то же самое, что и вы. Исправление очень просто: просто добавьте эту строку в свой com.mycompany.config.SecurityConfiguration, непосредственно предшествующий (прежде) первый элемент antMatchers.

.antMatchers(org.springframework.http.HttpMethod.OPTIONS, "/api/**").permitAll()

Это явно разрешит все запросы с помощью метода OPTIONS. Метод OPTIONS используется в CORS как способ прочитать все заголовки и посмотреть, какие HTTP-методы разрешены в запросе CORS.

Наконец, в вашем классе 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");

Ответ 2

В дополнение к вышеописанному аргументу, я также должен был изменить parse-links-service.js для обработки ответов опций OPTIONS, которые не имеют заголовка ответа "link":

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 в блок ngConstants для сред DEV и PROD.

Ответ 3

Вы можете использовать фильтр CORS из зависимости от Tomcat в pom.xml:

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

Используйте любую версию Tomcat, которую вы используете.

Добавить инициализацию фильтра CORS в 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);
    }

поместите эту строку в WebConfigurer.onStartup(...) как можно ближе к вершине.

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

Ответ 4

Я использую Jhipster версии 4.14.5

• Я скопировал следующие файлы в папку project-forntend:

  .bowerrc
  глоток
  pom.xml
  yarn.lock
  gulpfile.js
  readme.md

  bower_components
  .gitattributes
  SRC/главная/веб

  bower.json
  .gitignore
  package.json
  мишень/WWW

• Затем побежал:

  пряжа установить

  установка беседки

  залп установить

• Затем изменили файл gulp/config.js на:

  apiPort: 8081

  uri: ' http://localhost :'

• Затем запустил проект, запустив:

  глоток

Ответ 5

Разделение внешнего интерфейса и внутреннего интерфейса в приложении JHipster довольно просто. Пожалуйста, следуйте инструкциям, указанным ниже, если вы хотите настроить интерфейсные и серверные приложения отдельно и индивидуально с помощью JHipster:

1. Создайте две директории для фронтэнда и бэкэнда

   • Mkdir интерфейс
   • бэкэнд mkdir

2. измените каталог на интерфейс и выполните команду JHipster, чтобы создать только модуль интерфейса

   • CD-интерфейс
   • jhipster --skip-сервер --db = sql --auth = jwt
   • если все работает нормально, запустите команду npm start чтобы запустить приложение внешнего интерфейса.

   Я использую mysql для БД и JWT для аутентификации, и если вы хотите использовать веб-сокеты, вы добавляете: "--websocket = spring-websocket"

3. Теперь измените ваш каталог на backend и выполните команду JHipster, чтобы создать только модуль backend

   • cd..//как мы сейчас используем бэкэнд-каталог
   • бэкэнд
   • jhipster --skip-клиент
   • Запустите ваше бэкэнд-приложение при запуске весеннего загрузочного приложения.

Теперь ваше внешнее и внутреннее приложения работают отдельно и индивидуально, а внешний интерфейс координирует свои действия с внутренним приложением через вызовы REST API.