Question

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

错误

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)

       );

  }
}

code-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

假设您没有服务器访问权限，并且确实要使用此资源，则需要代理它。对于使用CLI的Angular开发服务器，支持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)

       );

  }

无法在Angular中显示增值服务

1 个答案: