Службы NG: одна служба выдает ошибку CORS, а другая работает нормально - PullRequest
Новая
       14

Службы NG: одна служба выдает ошибку CORS, а другая работает нормально

0 голосов
/ 07 апреля 2019

У меня есть 2 экспресс-службы NodeJS, которые работают в http://localhost:3000. Когда я запускаю свое угловое приложение (localhost: 4200), первая служба работает нормально и загружает данные, однако вторая служба из дочернего компонента выдает ошибку CORS. Не могли бы вы подсказать почему? 

Access to XMLHttpRequest at 'http://localhost:3000/yt-vid/Shazam!' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

У меня нет связанных с CORS заголовков / изменений ни в одном сервисе. Хотите знать, почему первый сервис работает, а другой - нет. Единственное заметное отличие заключается в том, что я вызываю первый сервис из ngOnInit, а другой - из ngOnChanges. 

export class NowRunningComponent implements OnInit {

 constructor(private nowrunningService: NowRunningServiceService) { }
  movies: Array<Movie>=[];
selectedMovie: Movie;
  ngOnInit() {
    console.log("MOvies length"+ this.movies);
    this.nowrunningService.getNowRunningMovies().subscribe((data:any) => {
      this.movies= data.results;

    });

  }
}

Второй сервисный звонок: 

export class MovieDetailComponent implements OnInit,OnChanges {

  @Input()
  selectedMovie:Movie;
  constructor(private ytService: YoutubeService) { }

  ngOnInit() {
    console.log('movie detail init');
  }
  videos:Array<any>=[];
  ngOnChanges(changes: SimpleChanges) {

    console.log('movie changed');
    console.log(`Changes: ${JSON.stringify(changes)})`);
     if(this.selectedMovie != null && this.selectedMovie.title!= null)
      {
        this.ytService.getYTvideos(this.selectedMovie.title).subscribe((data:any) => {
          this.videos= data.items;

        });
      }
  }

}

YoutubeService 

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

  search_url:string = "/yt-vid/";
  constructor(private http:HttpClient) { }

  getYTvideos (title:string) {
    console.log("Youtube service called");
    return this.http.get(globals.api_base_href+this.search_url+title);

}
}

NowRunningServiceService 

@Injectable({
  providedIn: 'root'
})
export class NowRunningServiceService {
pagenum:number=0;
apiUrl ="/now-running/";
  constructor(private http: HttpClient) { }

  getNowRunningMovies() {
    return this.http.get(globals.api_base_href+this.apiUrl+ (++this.pagenum));

  }


}

1 Ответ

0 голосов
/ 07 апреля 2019

Похоже, что в сервисе, вызвавшем проблему с CORS, отсутствовал заголовок «access-control-allow-origin» в исходном ответе. Так что перехватил и добавил этот заголовок. 

router.get('/*', function (req,res, next) {
  res.header('access-control-allow-origin','*')
  next();
});
...