获取XMLHttpRequest，同时还接收响应正文

Question

更新虽然我在AWS API网关api上设置了CORS，但我使用Lambda代理配置并要求我将所需的标头放在Lambda处理程序中。

我无法解决这个问题。我收到了CORS错误，同时获得了一个响应主体（实际的预期响应）。我使用angular2 / http。

  

XMLHttpRequest无法加载   https://xxxxxx.execute-api.us-east-2.amazonaws.com/dev/search。没有   ＆＃39;访问控制允许来源＆＃39;标题出现在请求的上   资源。起源＆＃39; http://localhost:4200＆＃39;因此是不允许的   访问。

任何想法甚至可能？

代码（错误始终被捕获并打印出来，而我仍然得到相应的响应）：

  public getNotes(searchString: string, authtoken: string): Observable<NotesResponse> {
    let headers = new Headers({'Content-Type': 'application/json'});
    headers.append('Authorization', authtoken);
    headers.append('search-key', searchString);

    let options = new RequestOptions({headers: headers});
    return this.http.post(this.notesUrl, null, options) // ...using post request
      .map((res:Response) => res.json()) // ...and calling .json() on the response to return data
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if
  }

this.com.notesService.getNotes(this.com.searchQuery, result).subscribe(
  notes => {
    console.log("Notes: notes");
  },
  err => {
    // Log errors if any
    console.log("There was an error retrieving the notes: " + err);
  });

Answer 1

浏览器获取响应并可以访问它，这就是为什么它可以在devtools中显示它。你无法从你的代码中获取它的原因是，浏览器不允许你的代码访问它 - 因为服务器没有发送Access-Control-Allow-Origin响应头来告诉浏览器允许客户端JavaScript用于从其交叉来源访问响应的代码。

CORS不会阻止服务器将响应发送回浏览器。服务器无论如何都会发回响应，浏览器会接收它们。但仅仅因为浏览器收到了响应并不意味着浏览器会将其暴露给您的客户端代码。浏览器只会在您的代码中包含Access-Control-Allow-Origin标题时才会显示跨源响应。