Question

我正在调用2个GitHub API，但是在控制台中打印响应时出现了上述错误。我在错误中进行了搜索，并尝试通过创建proxy.json文件并修改package.json文件来修复该错误，但它无法修复该错误。

export class HomeComponent implements OnInit {

  pythonJD:any[];
  javaJD:any[];

  constructor(private service: GithubService) { }

  ngOnInit() {
    this.python()
    this.java()
  }


  python() {
    this.service.getPython().subscribe(res => {
      this.pythonJD = res;
      console.log(res)
    });
  }

  java() {
    this.service.getJava().subscribe(res => {
      this.javaJD = res;
      console.log(res)
    });
  }
}

export class GithubService {

  constructor(private http:HttpClient) { }

  getPython():Observable<any>{
    return this.http.get('https://jobs.github.com/positions.json?description=python&location=new+york');
  }

  getJava():Observable<any>{
    return this.http.get('https://jobs.github.com/positions.json?description=java&location=new+york');
  }
}

Answer 1

CORS固定在api一侧。 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

出于安全原因，浏览器限制了从脚本启动的跨域HTTP请求。例如，XMLHttpRequest和Fetch API遵循同源策略。这意味着使用这些API的Web应用程序只能从加载该应用程序的相同来源请求资源，除非来自其他来源的响应包括正确的CORS标头。

由于您无法控制github，因此无法在客户端添加CORS标头，因此需要配置代理来解决该问题。

您可以使用以下指南为本地测试配置角度cli：https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/

也请angular-cli server - how to proxy API requests to another server?查看官方文档

Answer 2

我通过在我的API URL中添加https://cors-anywhere.herokuapp.com/来解决此问题。添加此后，我的API将类似于

https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?description=python&location=new+york

对我有用

本地主机：4200已被CORS策略阻止：所请求的资源上没有'Access-Control-Allow-Origin'标头

2 个答案: