Spring boot Spring引导和Http失败响应（未知url）：0未知错误

我正在学习Angular的Spring boot，我正在尝试启动并运行我的第一个应用程序，阅读以下博客：

我设法在8080端口上使用spring boot使应用程序正常工作，并且它按照预期工作。但是，当我尝试使其与Angular一起工作时，我得到以下错误：

    Angular is running in the development mode. Call enableProdMode() to enable the production mode.
core.js:3675
ERROR 
{…}
error: error
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
explicitOriginalTarget: XMLHttpRequest
__zone_symbol__errorfalse: null
__zone_symbol__loadfalse: null
__zone_symbol__xhrListener: function scheduleTask/target[XHR_LISTENER]()
__zone_symbol__xhrSync: false
__zone_symbol__xhrTask: Object { runCount: 0, _state: "notScheduled", type: "macroTask", … }
__zone_symbol__xhrURL: "//localhost:8080/cool-cars"
mozAnon: false
mozSystem: false
readyState: 4
response: ""
responseText: ""
responseType: "text"
responseURL: ""
status: 0
statusText: ""
timeout: 0
upload: XMLHttpRequestUpload {  }
withCredentials: false
__proto__: XMLHttpRequestPrototype { open: patchMethod/proto[name](), setRequestHeader: setRequestHeader(), send: patchMethod/proto[name](), … }
isTrusted: true
lengthComputable: false
loaded: 0
originalTarget: XMLHttpRequest
__zone_symbol__errorfalse: null
__zone_symbol__loadfalse: null
__zone_symbol__xhrListener: function scheduleTask/target[XHR_LISTENER]()
__zone_symbol__xhrSync: false
__zone_symbol__xhrTask: Object { runCount: 0, _state: "notScheduled", type: "macroTask", … }
__zone_symbol__xhrURL: "//localhost:8080/cool-cars"
mozAnon: false
mozSystem: false
readyState: 4
response: ""
responseText: ""
responseType: "text"
responseURL: ""
status: 0
statusText: ""
timeout: 0
upload: XMLHttpRequestUpload {  }
withCredentials: false
__proto__: XMLHttpRequestPrototype { open: patchMethod/proto[name](), setRequestHeader: setRequestHeader(), send: patchMethod/proto[name](), … }
target: XMLHttpRequest { __zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "//localhost:8080/cool-cars", readyState: 4, … }
timeStamp: 5395.150856236699
total: 0
type: "error"
__proto__: ProgressEventPrototype { lengthComputable: Getter, loaded: Getter, total: Getter, … }
headers: Object { normalizedNames: Map, lazyUpdate: null, headers: Map }
message: "Http failure response for (unknown url): 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: null
__proto__: Object { constructor: HttpErrorResponse() }

当我查看“网络”选项卡时，会看到以下信息：

标题： 接受
application/json，text/plain/ 接受编码 gzip，放气 接受语言 fr，fr-fr；q=0.8，在美国；q=0.5，en；q=0.3 连接
活命 主机
本地主机：8080

请求URL: 请求方法：获取

但没有回应。请求似乎超时了

Chrome网络选项卡显示以下内容：

Request URL:http://localhost:8080/cool-cars
Referrer Policy:no-referrer-when-downgrade
Provisional headers are shown
Accept:application/json, text/plain, */*
Origin:http://localhost:4200
Referer:http://localhost:4200/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36

我的Java类：

车辆等级：

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

@Entity
@Getter @Setter
@NoArgsConstructor
@ToString @EqualsAndHashCode

public class Car {

    @Id @GeneratedValue
    private Long id;

    private @NonNull String name;

}

汽车存储库：

import org.springframework.data.jpa.repository.JpaRepository;

import org.springframework.data.rest.core.annotation.RepositoryRestResource;
import org.springframework.web.bind.annotation.CrossOrigin;

@RepositoryRestResource
@CrossOrigin(origins = "http://localhost:4200")
public interface CarRepository extends JpaRepository<Car, Long>  {


}

如您所见，CORS是通过注释启用的

在Angular中，我做了以下更改

汽车服务

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


@Injectable()
export class CarService {

  constructor(private http: HttpClient) { }

  getAll(): Observable<any> {
    return this.http.get('//localhost:8080/cool-cars');
  }

}

车辆列表组件：

import { Component, OnInit } from '@angular/core';
import { CarService } from '../shared/car/car.service';


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

  cars: Array<any>;

  constructor(private carService: CarService) { }

  ngOnInit() {
    this.carService.getAll().subscribe(data => {
      this.cars = data;
    });
  }

}

从'@angular/core'导入{Component，OnInit}；
从“../shared/car/car.service”导入{CarService}；
@组成部分({
选择器：“应用程序车辆列表”，
templateUrl:'./car list.component.html'，
样式URL:['./car list.component.css']
})
导出类CarListComponent实现OnInit{
汽车：阵列；
构造函数（私有carService:carService）{}
恩戈尼尼特（）{
this.carService.getAll（）.subscribe（数据=>{
这是。cars=数据；
});
}
}

汽车列表组件html

<h2>Car List</h2>

<div *ngFor="let car of cars">

  {{car.name}}

</div>

车辆列表
{{car.name}

我正在使用IntelliJ

---

我已经读了很多关于这个问题的书，包括关于这个主题的类似问题，但是我没有看到一个可以解决这个问题的答案（并且有同样空洞的回答）。非常感谢您的帮助

在我的示例中，我有

@CrossOrigin（origins=”http://localhost:4200“

在

@GetMapping（“/cool cars”）

旁边，而不是在类本身上。你能试着移动它看看是否有效吗？谢谢你的回答，马特，我也试过了，但它不起作用。我仍然收到“get”请求，要求冷却空车或超时…：（我建议从GitHub克隆我已完成的项目（），然后使用类似SmartSynchronize（）或Beyond Compare（）的东西）比较这两个项目并找出差异。确保排除节点模块。我猜这可能是在

DemoApplication.java

中添加

simpleCorsFilter

的最后一步。我已经完成了，我遇到了一个类似的问题：汽车没有显示，我无法添加新车。但是我浏览的网络选项卡ser显示了一些稍有不同的情况：状态302，原因是：“CORS头«访问控制允许源代码»缺失。”。这很奇怪，因为代码的spring boot部分中的所有内容都是为了添加CORS头而做的……您能将您的项目发布到GitHub以便我可以查看它吗？

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { CarService } from './shared/car/car.service';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import {CarListComponent} from "./car-list/car-list.component";


@NgModule({
  declarations: [
    AppComponent,
    CarListComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [CarService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { CarService } from '../shared/car/car.service';


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

  cars: Array<any>;

  constructor(private carService: CarService) { }

  ngOnInit() {
    this.carService.getAll().subscribe(data => {
      this.cars = data;
    });
  }

}

<h2>Car List</h2>

<div *ngFor="let car of cars">

  {{car.name}}

</div>