未能在 Angular 中显示价值服务

Question

我正在尝试显示包含国家代码和详细信息的服务，但我在控制台中遇到错误我将所有详细信息放在下面

错误

localhost/:1 Failed to load http://country.io/names.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

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)

       );

  }
}

代码-country.ts

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();
  }

}

Answer 1

错误消息告诉您所有您真正需要知道的。您正在尝试向不同的域发出请求，称为跨域请求或 CORS。如果您想了解 CORS 是什么、它存在的原因以及它的作用……我强烈建议您阅读： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

假设您没有服务器访问权限，并且真的想使用此资源，则需要对其进行代理。对于 Angular 中的开发服务器，支持使用 CLI webpack-proxy。您可以通过使用 ng serve --proxy-config ./proxy.conf.json 启动您的程序来使用它。你看到这里有一个到代理配置文件的重定向，你可以在那里添加你的代理配置。它看起来像这样：

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

然后您的获取请求将请求本地别名，例如：

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

        (data) => console.log(data)

       );

  }

未能在 Angular 中显示价值服务

Failed to display value service in Angular

angular

multidimensional-array

angular-ui-router

rxjs

angular-services