GET запрос Angular + Spring не работает. Почему? - PullRequest
Новая
       16

GET запрос Angular + Spring не работает. Почему?

0 голосов
/ 02 февраля 2020

Я пытаюсь реализовать простой GET-запрос для отправки Объекта типа SearchMessage с моего Spring Boot сервера на мой Angular клиентское приложение. Я запускаю серверное приложение и проверяю, правильно ли отображается относительный JSON на localhost:8080/greeting, и он работает. Вот что я вижу: 

{
  "id": 1,
  "inputText": "Hello, World!",
  "targetSite": "Amazon",
  "searchLimit": 10,
  "numberOfProxies": 10,
  "details": false
}

Затем я запускаю свой клиент, обращающийся к компоненту (http://localhost:4200/data), который должен печатать в журнале содержимое этого JSON, но вместо этого я получаю в утешить следующую ошибку. Что я делаю не так?

ОШИБКА

Object {headers: {…}, status: 0, statusText: "Unknown Error", url: "localhost: 8080 / приветствие, ок: ложь, имя: «HttpErrorResponse», сообщение: «Http ошибка ответа для локального хоста: 8080 / приветствие: 0 неизвестная ошибка», ошибка: ошибка} core. js: 6014: 19

Приложение Spring

Содержимое SearchMessage.java: 

@Entity
public class SearchMessage {

    private long id;
    private String inputText;
    private String targetSite;
    private int searchLimit;
    private int numberOfProxies;
    private boolean details;

    // Getters, setters and constructors...
}

Содержимое GreetingController.java: 

@RestController
public class GreetingController {

    private static final String template = "Hello, %s!";
    private final AtomicLong counter = new AtomicLong();

    @GetMapping("/greeting")
    public SearchMessage greeting(@RequestParam(value = "name", defaultValue = "World") String name) {
        return new SearchMessage(counter.incrementAndGet(), String.format(template, name), "Amazon", 10, 10, false);
    }
}

Необработанные данные отображаются на localhost:8080/greeting: 

{"id":3,"inputText":"Hello, World!","targetSite":"Amazon","searchLimit":10,"numberOfProxies":10,"details":false}

Angular приложение

Содержимое моего http.service.ts: 

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class HttpService {

  constructor(private http: HttpClient) { }

  getGreeting() {
    return this.http.get('localhost:8080/greeting');
  }
}

Содержимое data.component.ts: 

import {Component, OnInit} from '@angular/core';
import {HttpService} from '../http.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.scss']
})

export class DataComponent implements OnInit {
  greeting: Object;

  constructor(private _http: HttpService) {
  }

  ngOnInit() {
    this._http.getGreeting().subscribe(data => {
      this.greeting = data;
      console.log(this.greeting);
    });
  }
}

Содержимое search-message.ts: 

export class SearchMessage {

  constructor(
    public id: number,
    public inputText: string,
    public targetSite: string,
    public searchLimit: number,
    public numberOfProxies: number,
    public details: boolean
  ) { }
}

Ответы [ 2 ]

0 голосов
/ 02 февраля 2020

Чтобы разрешить поддержку CORS Origin для вашего внутреннего приложения, вы должны создать класс Configuration, который добавляет Cors origin и позволяет вашему веб-приложению иметь возможность вызывать API, предоставляемые вашим приложением Spring Boot: 

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        .allowedOrigins("http://localhost:4200");
    }
}

Вы можете найти пример здесь .

Я не уверен, что проблема связана с CORS, но наверняка вам нужно добавить ее.

0 голосов
/ 02 февраля 2020

В классе контроллера добавьте: 

@CrossOrigin(origins = "http://localhost:4200")

над аннотацией @RestController, чтобы приложение весенней загрузки и приложение angular связывались друг с другом. Это пример класса контроллера, надеюсь, это поможет. 

     @CrossOrigin(origins = "http://localhost:4200")
     @RestController

     public class StudentsController{

    @Autowired
    StudentRepo repo;

    //insert
   @PostMapping("/students")
   public Students insert(@Valid @RequestBody Students students){
    return repo.save(students);
    }
   //list of students   
   @GetMapping("/students")
   public List<Students> index(){
   return repo.findAll();
   }}
...