title: Spring Boot and Angular giving Http failure response for (unknown url): 0 Unknown Error
body: <p>I am learning Spring boot with Angular, and I am trying to get my first app up and running reading the following blogs:</p>
  
  <p><a href="http://mydevgeek.com/angular-4-crud-application-with-spring-boot-rest-service-part-2/" rel="noreferrer">http://mydevgeek.com/angular-4-crud-application-with-spring-boot-rest-service-part-2/</a></p>
  
  <p><a href="https://dzone.com/articles/build-a-basic-crud-app-with-angular-50-and-spring" rel="noreferrer">https://dzone.com/articles/build-a-basic-crud-app-with-angular-50-and-spring</a></p>
  
  <p>I manage to get the app working using spring boot on the 8080 port, and it works as expected. However, when I try to get it to work with Angular, I get the following error:</p>
  
  <pre><code>    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() }
  </code></pre>
  
  <p>When I look at the network tab, I see the following information:</p>
  
  <p>Header: 
  Accept<br>
  application/json, text/plain, <em>/</em>
  Accept-Encoding 
  gzip, deflate
  Accept-Language 
  fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
  Connection<br>
  keep-alive
  Host<br>
  localhost:8080</p>
  
  <p>Request URL: <a href="http://localhost:8080/cool-cars" rel="noreferrer">http://localhost:8080/cool-cars</a>
  Request Method: GET</p>
  
  <p>But there is no response. It seems the request times out. </p>
  
  <p>The Chrome network tab shows this:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>My Java classes:</p>
  
  <p>Car class:</p>
  
  <pre><code>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;
  
  }
  </code></pre>
  
  <p>Car repository:</p>
  
  <pre><code>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&lt;Car, Long&gt;  {
  
  
  }
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>import java.util.Collection;
  import java.util.stream.Collectors;
  
  @CrossOrigin(origins = "http://localhost:4200")
  @RestController
  @RequestMapping("/")
  public class CoolCarController {
  
      private CarRepository repository;
  
      public CoolCarController(CarRepository repository) {
          this.repository = repository;
      }
  
      @GetMapping("/cool-cars")
      public Collection&lt;Car&gt; coolCars() {
  
          return repository.findAll().stream()
                  .filter(this::isCool)
                  .collect(Collectors.toList());
      }
  
      private boolean isCool(Car car) {
          return !car.getName().equals("AMC Gremlin") &amp;&amp;
                  !car.getName().equals("Triumph Stag") &amp;&amp;
                  !car.getName().equals("Ford Pinto") &amp;&amp;
                  !car.getName().equals("Yugo GV");
      }
  }
  </code></pre>
  
  <p>App class:</p>
  
  <pre><code>import org.springframework.boot.ApplicationRunner;
  import org.springframework.boot.SpringApplication;
  import org.springframework.boot.autoconfigure.SpringBootApplication;
  import org.springframework.context.annotation.Bean;
  
      @SpringBootApplication
      public class DemoApplication {
  
          public static void main(String[] args) {
              SpringApplication.run(DemoApplication.class, args);
          }
  
          @Bean
          ApplicationRunner init(CarRepository repository) {
  
              return args -&gt; {
  
                  Stream.of("Ferrari", "Jaguar", "Porsche", "Lamborghini", "Bugatti",
  
                          "AMC Gremlin", "Triumph Stag", "Ford Pinto", "Yugo GV").forEach(name -&gt; {
  
                      Car car = new Car();
  
                      car.setName(name);
  
                      repository.save(car);
  
                  });
  
                  repository.findAll().forEach(System.out::println);
  
              };
  
          }
  
      }
  </code></pre>
  
  <p>As you can see, the CORS is enable with annotations. </p>
  
  <p>In Angular, I have made the following changes.</p>
  
  <p>car.service.ts</p>
  
  <pre><code>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&lt;any&gt; {
      return this.http.get('//localhost:8080/cool-cars');
    }
  
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>car list component:</p>
  
  <pre><code>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&lt;any&gt;;
  
    constructor(private carService: CarService) { }
  
    ngOnInit() {
      this.carService.getAll().subscribe(data =&gt; {
        this.cars = data;
      });
    }
  
  }
  </code></pre>
  
  <p>car list component html</p>
  
  <pre><code>&lt;h2&gt;Car List&lt;/h2&gt;
  
  &lt;div *ngFor="let car of cars"&gt;
  
    {{car.name}}
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using IntelliJ. </p>
  
  <p>I have read a lot about this issue, including similar questions on this topic, but I did not see an answer that could resolve this issue (and that had the same empty response). Thanks a lot in advance for your help! </p>