フェッチ要求で500エラー。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

Question

私は、create-react-appを使用してフロントエンドWebアプリケーションを構築し、ProPublica APIを呼び出しています。コールをフェッチ以下である：私はこのエラーを取得しています

export const fetchSenators =() => dispatch => { 
fetch('https://api.propublica.org/congress/v1/115/senate/members.json', { 
    method: 'GET', 
    headers: { 
     'X-API-Key': process.env.REACT_APP_PROPUBLICA_API_KEY, 
     'Access-Control-Request-Headers': '*' 
    } 
    }).then(response => response.json()) 
    .then(data => dispatch({ type: FETCH_SENATORS, payload: data.results[0].members }));  
} 

：

「いいえ 『アクセス制御 - 許可 - 起源』ヘッダが要求されたリソース上に存在する起源 『https://anaxagoras.herokuapp.com』はしたがって、許可されていません。 ：1キャッチされていない（約束されています）TypeError：フェッチするのに失敗しました "というエラーメッセージが表示されましたが、

レスポンスデータが必要なので、{mode： 'no-cors'}は使用できません。このリクエストに500エラーが返されないようにするために追加するヘッダが必要ですか？

私はここで何が起こっているのか、なぜセキュリティ上の懸念があるのか​​一般的に理解していますが、なぜこれが起こっているのかを簡単に説明できれば幸いです。ありがとう！

Answer 1

私はProPublica APIキーにサインアップして、正常に実装次のコード使用してフェッチ要求をGET：

let fetchSenators =() => { 
fetch('https://api.propublica.org/congress/v1/115/senate/members.json', { 
    method: 'GET', 
    mode: 'CORS', 
    headers: { 
    'X-API-Key': 'Q82EAnyHuygomXxK2mNDfcHkvOQ17EmsBPvOc1eq' 
    } 
}).then(response => response.json()) 
    .then(response => { 
    renderResults(response.results[0].members) 
})} 

あなたはここで働いそれを見ることができます。

https://codepen.io/BenSmith/pen/xPVyqp

注意しています私はあなたのコードのディスパッチの面を取り除いた。注意すべき

ポイント：

• をあなたがクロスドメインを作っているように、あなたがフェッチオプションでCORSモードを指定したい呼び出します。
• CORSモードの外観が要求のこの側面を処理するように設定するために、 'Access-Control-Request-Headers'ヘッダーを使用する必要はありません。
• あなたのコードでは、アクションが明確であるようにFETCH_SENATORS_SUCCESSを使用する必要があります。つまり、FETCH_SENATORSは、アクションが上院のデータを取得していることを意味します。この場合、リクエストが成功した後に結果を返します。