HTTP 获取，Angular

Question

您好，我实现了如下的 get 方法：

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

@Injectable({
  providedIn: 'root'
})
export class CourseService {

  constructor(private httpClient: HttpClient) { }

  private courseUrl: string = 'http://localhost:8080/api/v1/courses';

  public getCourses(): Observable<Course[]> {
    return this.httpClient.get<Course[]>(this.courseUrl);
  }

}

export interface Course {
  id: number;
  title: string;
  startTime: string;
  endTime: string;
  day: string;
  totalPlaces: number;
}

当然是我的pojoclass

而我的组件部分class：

import { Component, OnInit } from '@angular/core';
import * as Feather from 'feather-icons';
import { Course, CourseService } from '../services/course-services.service';
import { PositionEnum } from './position-enum';

@Component({
  selector: 'app-admin-dashboard',
  templateUrl: './admin-dashboard.component.html',
  styleUrls: ['./admin-dashboard.component.css']
})
export class AdminDashboardComponent implements OnInit {

  position: PositionEnum;
  course: Course[];

  constructor(private courseService: CourseService) { }

  public get positionEnum(): typeof PositionEnum {
    return PositionEnum;
  }

  ngOnInit(): void {
    this.courseService.getCourses().subscribe(value => {
      this.course = value;
    })
    Feather.replace();
  }

在 html 文件中，我试图获取有关它是否有效的任何信息，但几次尝试后我什么也没看到。我试图通过这样的方式显示它：{{ course[0].id }} 或这个 {{ course['0'].id }}。我很确定 api 有效，因为我收到这样的回复：

[{"id":1,"title":"Analiza matematyczna","startTime":"12:00:00","endTime":"13:30:00","day":"MONDAY","totalPlaces":10},{"id":2,"title":"Programowanie obiektowe","startTime":"15:00:00","endTime":"16:00:00","day":"MONDAY","totalPlaces":15}]

更新：我发现错误：CORS 策略已阻止从源 'http://localhost:4200' 访问位于 'http://localhost:8080/api/v1/courses' 的 XMLHttpRequest：请求的资源上不存在 'Access-Control-Allow-Origin' header。有谁知道问题出在哪里？

Answer 1

请尝试添加 header Access-Control-Allow-Origin: *

此外，不要忘记授予 Cors 保护服务器的权限。你可以看看这个。 Cross-Origin Request Headers(CORS) with PHP headers

Answer 2

为后端添加了@CrossOrigin(origins = "http://localhost:4200")，一切正常

HTTP 获取，Angular

Http GET, Angular

get

http

typescript

angular