试图理解为什么简单的角2http.get（）不工作在localhost

Question

试图理解为什么这样一个简单的rest调用api不能从localhost（使用angular cli）工作。

这是服务代码：

commandsUrl ='http://www.mocky.io/v2/...';
  headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
  options = new RequestOptions({ headers: this.headers, withCredentials: true });

  getMyList (): Observable<any> {
    return this.http.get(this.commandsUrl, this.options)
      .map(this.extractData)
      .catch(this.handleError);

  }
  private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }
  private handleError (error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

浏览器的错误是:

XMLHttpRequest 无法加载 http://www.mocky.io/v2/...对预检请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许源”标头。因此，不允许访问源“http://localhost:4200”。

Answer 1

你必须阅读CORS的信息。在发送真正的 AJAX 请求之前，将发送 GET、OPTIONS 请求，并且服务器必须使用“访问控制-允许源”标头进行响应，以授予您访问它的权限。

也就是位于' http://www.mocky.io/v2/... '的服务器。必须配置为接受来自服务器的CORS请求(或使用通配符)

https://www.html5rocks.com/en/tutorials/cors/