レスポンス本文を受け取っているときにXMLHttpRequestを取得する

Question

更新： AWS API Gateway apiでCORSをセットアップしましたが、私はLambda Proxy設定を使用していますが、必要なヘッダをLambdaハンドラに入れる必要があります。

私はこれを理解することはできません。 CORSエラーが発生していますが、同時に、応答本体（実際の期待される応答）を取得しています。私はangular2/httpを使用しています。

XMLHttpRequestが https://xxxxxx.execute-api.us-east-2.amazonaws.com/dev/searchをロードすることはできません。いいえ 要求された リソースに 'Access-Control-Allow-Origin'ヘッダーが存在します。したがって、「http://localhost:4200」の原点は許可されません。

どのように考えても構いませんか？

コード（エラーは常にキャッチし、私はまだ適切な応答を取得しながら、プリントアウトされる）：

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

ブラウザは、それはデベロッパーツールでそれを示すことができる理由である、応答を取得し、それをアクセスすることができます。サーバーがクライアント側のJavaScriptコードが応答にアクセスするようにブラウザに指示するためにAccess-Control-Allow-Origin応答ヘッダーを送信していないため、コードからアクセスできない理由は、ブラウザがコードにアクセスできないためです。それからクロスオリジン。

CORSは、サーバーがブラウザに応答を返すのをブロックしません。サーバーは応答に関係なく応答を返し、ブラウザーはそれに関係なく応答を返します。しかし、ブラウザが応答を受け取っただけであっても、ブラウザがクライアントコードにそれを公開するわけではありません。ブラウザには、Access-Control-Allow-Originヘッダーが含まれている場合にのみ、クロス・オリジン・レスポンスがコードに公開されます。