Angular не извлекается из Spring через RESTful API

Question

У меня возникли проблемы при попытке вызвать RESTful API из Angular в Spring.Вот мой класс машинописи в Angular:

import { Injectable } from "@angular/core";
import { CATEGORIES } from "./mock-category";
import { Observable, of } from "rxjs";
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Category } from "./category";

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: "root"
})
export class CategoryService {
  constructor(private http: HttpClient) { }

  private categoryUrl = '/api/category';

  getCategories() {
    return this.http.get<Category[]>(this.categoryUrl);
  }
}

И мой класс контроллеров в Java:

package controller;

import domain.Category;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import service.CategoryService;
import java.util.List;

@CrossOrigin(origins = "http://localhost:4200", methods = { RequestMethod.POST, RequestMethod.GET, RequestMethod.DELETE,
        RequestMethod.PUT })
@RestController
@RequestMapping({"/api"})
public class CategoryController {

    @Autowired
    private CategoryService categoryService;

    @GetMapping("/categories")
    public List findAll(){
        return categoryService.findAll();
    }
}

Мне уже удалось запустить maven, но когда я пытаюсь выбрать из Angular, яполучаю это сообщение об ошибке в консоли:

zone.js:3243 GET http://localhost:4200/api/category 404 (Not Found)

Есть идеи?Заранее спасибо!

Answer 1

Это потому, что вы запрашиваете по URL http://localhost:4200/.Но на 4200 порту ваше приложение angular работает, а не серверная часть.Backend, скорее всего, будет работать на 8080 порту, поэтому вам нужно указать полное URL из backend service.как:

private categoryUrl = 'http://localhost:8080/api/categories';

ПРИМЕЧАНИЕ : я только предположил, что ваш бэкэнд работает на 8080, вам нужно добавить порт, на котором вы работаете, backend.Также измените /category на /categories, как вы указали в Service

Answer 2

Недостаток Ans- https://stackoverflow.com/a/56555192/6582610 заключается в том, что вы должны изменить в каждом файле службы TS и добавить домен в каждый URL, а не создавать перехватчик для этого

Используйте новый перехватчик HttpClient для управленияваш запрос.

Создайте правильный инъекционный файл, который реализует HttpInterceptor:

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class APIInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const apiReq = req.clone({ url: `http://localhost:8080/${req.url}` });
    return next.handle(apiReq);
  }
}

HttpInterceptor может клонировать запрос и изменять его по вашему желанию, в этом случае я добавил путь localhost в каждый ваш APIURL http://localhost:8080/.

Предоставьте в AppModule следующие конфигурации:

      provide: HTTP_INTERCEPTORS,
      useClass: APIInterceptor,
      multi: true,
    }
  ]

Теперь все ваши запросы будут начинаться с http://localhost:8080, вам не нужно переходить на каждый файл иизмените его. Также, если у вас есть несколько доменов, вы можете настроить здесь с условием if-else.

Answer 3

Попробуйте добавить это как файл конфигурации java в пакете SpringBootApp:

@Configuration
@EnableWebSecurity
public class AppSecurity extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
         http.csrf().disable().cors().disable().httpBasic()
                .and()
                .authorizeRequests()
                .antMatchers("/api/categories").permitAll()//Permits this api for all
                .anyRequest().authenticated();

    }
}

Answer 4

Для вашей проблемы CORS вы можете попробовать это:

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // localhost:4200 (for dev) or YOUR_SERVER:8080 (for production)
        registry.addMapping("/api/**").allowedOrigins("http://localhost:4200", "http://YOUR_SERVER:8080").allowCredentials(true);
    }
}

А вот мои заголовки для клиентской стороны:

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'withCredentials': 'true'
  })
};