Getting XMLHttpRequest while also receiving the response body

Question

Update: Although I setup CORS on the AWS API Gateway api, I'm using the Lambda Proxy configuration and that requires that I put the needed headers in the Lambda handler.

I can't figure this one out. I'm getting the CORS error while, at the same time, getting a response body (the actual expected response). I'm using angular2/http.

XMLHttpRequest cannot load https://xxxxxx.execute-api.us-east-2.amazonaws.com/dev/search. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Any idea how that's even possible??

Code (the error is always caught and printed out, while I still get the appropriate response):

  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

The browser gets the response and can access it, which is why it can show it in devtools. The reason you can’t get to it from your code is, the browser doesn’t let your code access it—because the server isn’t sending the Access-Control-Allow-Origin response header to tell the browser to allow client-side JavaScript code to access responses from it cross-origin.

CORS doesn’t block servers from sending responses back to browsers. Servers send responses back regardless, and browsers receive them regardless. But just because the browser has received the response doesn’t mean the browser will expose it to your client code. Browsers will only expose cross-origin responses to your code if they include the Access-Control-Allow-Origin header.