Не удалось отобразить значение службы в Angular - PullRequest
Новая
       15

Не удалось отобразить значение службы в Angular

0 голосов
/ 25 сентября 2018

Я пытаюсь отобразить службу, содержащую код страны и детали, но я получаю сообщение об ошибке в консоли. Я помещаю все подробности ниже

Ошибка

localhost /: 1 Не удалось загрузить http://country.io/names.json: Нет заголовка «Access-Control-Allow-Origin» на запрошенном ресурсе.Поэтому происхождение 'http://localhost:4200' не разрешено.

countrycode.service.ts 

import { Http } from '@angular/http';
import {Injectable} from '@angular/core';
import { map } from 'rxjs/operators';
@Injectable()
export class CodeCountryService {

  constructor(private http: Http) { }

  getData() {
    return this.http.get('http://country.io/names.json').pipe(map(
     (response) => response.json()
    )).subscribe(

        (data) => console.log(data)

       );

  }
}

код страны.тс 

import { Component, OnInit } from '@angular/core';
import { CodeCountryService } from '../services/Contrycode.service';



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

  constructor(private _CodeCountryService: CodeCountryService) { }

  getData() {


  }

  ngOnInit() {
    this._CodeCountryService.getData();
  }

}

1 Ответ

0 голосов
/ 25 сентября 2018

Сообщение об ошибке говорит вам все, что вам нужно знать на самом деле.Вы пытаетесь сделать запрос к другому домену, известному как междоменный запрос или CORS.Если вы хотите понять, что такое CORS, почему он существует и что он делает ... Я настоятельно рекомендую вам прочитать: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Если у вас нет доступа к серверу, и вы действительно хотитеЧтобы использовать этот ресурс, вам нужно прокси его.Для вашего dev-сервера в Angular поддерживается CLI webpack-proxy.Вы используете его, запустив свою программу, используя ng serve --proxy-config ./proxy.conf.json.Вы видите, что здесь есть перенаправление на файл конфигурации прокси, вы можете добавить туда свою конфигурацию прокси.Это выглядит так: 

{
   "/country": {
      "target": "http://country.io/",
      "secure": false,
      "changeOrigin": true
   },
}

Тогда ваш запрос get запросит локальный псевдоним, как таковой: 

getData() {
    return this.http.get('country/names.json').pipe(map(
     (response) => response.json()
    )).subscribe(

        (data) => console.log(data)

       );

  }
...