Angular HttpErrorResponse GET 请求

Question

我有一个简单的 Quarkus 项目，想用 HttpClient 在 Angular table 中显示数据。我还有一个 CORS 过滤器。无论如何，我收到以下错误： Angular table with no date, HttpErrorResponse Status 0

service.ts

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

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

  url = "localhost:8080/school"

  constructor(public http: HttpClient) { }

  getAll(): Observable<School[]> {
    return this.http.get<School[]>(this.url);
  }

  getById(id: number): Observable<School> {
    const url = "locahlost:8080/school/{id}";
    return this.http.get<School>(url);
  }

}

ts 组件

import { Component, OnInit } from '@angular/core';
import { School } from '../model/school';
import { SchoolService } from '../school.service';

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

  schools: School[] = [];
  
  constructor(public schoolService: SchoolService) { }

  ngOnInit(): void {
    this.schoolService.getAll().subscribe(e => {
      this.schools = e;
    });
  }

}

html

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Street</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let school of schools">
            <td>{{school.id}}</td>
            <td>{{school.name}}</td>
            <td>{{school.street}}</td>
        </tr>
    </tbody>
</table>

服务器型号

package model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;

@Entity
public class School {

    @Id
    @GeneratedValue
    private int id;
    private String name;
    private String street;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getStreet() {
        return street;
    }

    public void setStreet(String street) {
        this.street = street;
    }
}

资源

package rest;

import model.School;

import javax.inject.Inject;
import javax.transaction.Transactional;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import java.util.List;

@Path("school")
@Produces(MediaType.APPLICATION_JSON)
@Transactional
public class SchoolResource {

    @Inject
    SchoolDao dao;

    @GET
    public List<School> getAll() {
        return dao.getAll();
    }

    @Path("id")
    @GET
    public School getById(@PathParam("id") int id) {
        return dao.getById(id);
    }

}

道

package rest;

import model.School;

import javax.enterprise.context.Dependent;
import javax.inject.Inject;
import javax.persistence.EntityManager;
import java.util.List;

@Dependent
public class SchoolDao {

    @Inject
    EntityManager em;

    public List<School> getAll() {
        return em.createQuery("select s from School s", School.class).getResultList();
    }

    public School getById(int id) {
        return em.find(School.class, id);
    }

}

提前谢谢你，我认为问题一定出在服务器上，因为我已经尝试用 JSON 文件而不是 Quarkus 数据显示数据，它确实有效。

Answer 1

同@R.Richards mentioned 一样，在服务文件的url前面加上“http://”解决了问题。

Angular HttpErrorResponse GET 请求

Angular HttpErrorResponse GET Request

java

rest

httpclient

typescript

angular