Базовый запрос GET не удался Angular и Spring

Я пытаюсь сделать простой запрос от angular до spring. Я использовал чистую пружинную сеть и пружинную безопасность, а также простой запрос angular (9).

Позвольте мне поделиться своим кодом Java и Angular.

Java-код

@RestController @CrossOrigin(origins = "http://localhost:4200")
public class Main {

@RequestMapping("/hello")
public Map<String,Object> home(){
    Map<String, Object> model = new HashMap<String, Object>();
    model.put("id", UUID.randomUUID().toString());
    model.put("content", "Hello from Backend");
    return model;
    }
}

Файл auth.componen.ts на стороне Angular

import { HttpClient } from '@angular/common/http';
import { NgForm } from '@angular/forms';
import { Component } from '@angular/core';


@Component({
    selector: 'app-auth',
    templateUrl: './auth.component.html'
})
export class AuthComponent{
    isLoginMode = true;
    title = 'Demo';
    greeting = {};

    onSwitchMode(){
        this.isLoginMode = !this.isLoginMode;
    }

    onSubmit(form: NgForm){
        console.log(form.value);
        form.reset(); 
    }

    constructor(private http: HttpClient){
        http.get('http://localhost:8080/hello').subscribe(data => this.greeting = data);
    }
}

HTML-сторона

<div style="text-align:center"class="container">
  <h1>
    Welcome {{title}}!
  </h1>
  <div class="container">
    <p>Id: <span>{{greeting.id}}</span></p>
    <p>Message: <span>{{greeting.content}}!</span></p>
  </div>
</div>

Я перехожу по этой ссылке, но каждый раз, когда получаю эта ошибка: Сообщение об ошибке, которое я получаю

Редактировать 1: Инструменты разработчика Chrome Результат вкладки «Сеть»: Вкладка

Я пытался искать в Интернете, но не могу найти ответ. Можете ли вы помочь мне продолжить?


person Mertalp Tasdelen    schedule 28.07.2020    source источник
comment
Я вижу, у вас есть cors с аннотацией. Просто чтобы убедиться, что ваше угловое приложение работает на localhost:4200?   -  person Cezary Butler    schedule 28.07.2020
comment
Привет, @CezaryButler, да, мое угловое приложение работает на localhost:4200, и моя страница запроса localhost:4200/auth   -  person Mertalp Tasdelen    schedule 28.07.2020
comment
Не могли бы вы также опубликовать часть вкладки сети Chrome с предварительным запросом? Похоже, что, несмотря на наличие аннотации, весна не добавила заголовок Access-Control-Allow-Origin.   -  person Cezary Butler    schedule 28.07.2020
comment
Я отредактировал свой вопрос.   -  person Mertalp Tasdelen    schedule 28.07.2020


Ответы (2)


В Spring Security необходимо дополнительно настроить фильтр Cors.

Вот ссылка из документации Spring https://docs.spring.io/spring-security/site/docs/4.2.x/reference/html/cors.html

Spring Framework обеспечивает первоклассную поддержку CORS. CORS должен быть обработан до Spring Security, поскольку предварительный запрос не будет содержать никаких файлов cookie (т. е. JSESSIONID). Если запрос не содержит никаких файлов cookie, а Spring Security находится первым, запрос определит, что пользователь не аутентифицирован (поскольку в запросе нет файлов cookie), и отклонит его.

Самый простой способ убедиться, что CORS обрабатывается в первую очередь, — это использовать CorsFilter.

Фильтр Cors можно просто настроить через WebSecurityConfigurerAdapeter.

@EnableWebSecurity
public class WebSecurityConfig extends 
WebSecurityConfigurerAdapter {

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        // if Spring MVC is on classpath and no CorsConfigurationSource is provided,
        // Spring Security will use CORS configuration provided to Spring MVC
        .cors().and()
        ...
    }
}
person SKumar    schedule 28.07.2020
comment
Спасибо за ваш ответ и извините за опоздание. - person Mertalp Tasdelen; 13.08.2020

Скриншот из консоли довольно хорошо объясняет, почему это не удалось. Наверняка вы используете угловое приложение по другому URL-адресу, чем весеннее.

Чтобы разрешить приложению angular взаимодействовать с серверной частью Spring, вам необходимо настроить политику CORS на серверной части, которая рассматривается здесь

Похоже, ваш браузер по какой-то причине не отправил предварительный запрос. Возможно, вы найдете объяснение на MDN

person Cezary Butler    schedule 28.07.2020
comment
Здравствуйте, вы можете увидеть мой код Java, в котором есть аннотация @CrossOrigin. - person Mertalp Tasdelen; 28.07.2020
comment
@MertalpTasdelen Я проверил, и действительно, с Spring-Security требуется дополнительная конфигурация фильтра cors, как в ответе пользователя 11244881. - person Cezary Butler; 29.07.2020
comment
Большое спасибо за выбор времени. - person Mertalp Tasdelen; 13.08.2020