Access-Control-Allow-Originヘッダーの説明–CORSの例

APIを呼び出すと、コンソールに次のようなエラーが表示されることがよくあります。

 Access to fetch at '//somesite.com' from origin '//yoursite.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin 

この投稿では、このエラーが発生する理由とその修正方法について説明します。

Access-Control-Allow-Originヘッダーとは何ですか?

Access-Control-Allow-OriginCORSヘッダーです。CORS(Cross Origin Resource Sharing)は、ブラウザーがオリジンAで実行されているサイトにオリジンBからのリソースを要求させるメカニズムです。

オリジンはホスト名だけでなく、ポート、ホスト名、およびスキームの組み合わせです。 //mysite.example.com:8080/

これが実行される場所の例を次に示します-

  1. オリジンA:が//mysite.comあり、オリジンB:からリソースを取得したい//yoursite.com
  2. セキュリティを保護するために、ブラウザはyoursite.comからのリソースへのアクセスを許可せず、リクエストをブロックします。
  3. オリジンAがリソースにアクセスできるようにするには、オリジンBが、オリジンからリソースを取得しても問題がないことをブラウザに通知する必要があります。

これを非常によく説明しているMozillaDeveloperNetworkの例を次に示します。

ブラウザはCORSの助けを借りて、オリジンがリソースを相互に共有できるようにします。

オリジン間でリソースを共有できるヘッダーがいくつかありますが、主なものはAccess-Control-Allow-Originです。これは、このサーバーからの要求の受信を許可されているオリジンをブラウザーに通知します。

誰が設定する必要がありますAccess-Control-Allow-Originか?

このヘッダーを誰が設定する必要があるかを理解するには、次のシナリオを検討してください。曲の表示と再生に使用されるWebサイトを閲覧しています。Webサイトは、バックグラウンドで悪意を持って銀行に接続しようとします。

では、この悪意のあるWebサイトが銀行からデータを盗むのを防ぐ究極の能力を持っているのは誰ですか?銀行!したがって、銀行はAccess-Control-Allow-Origin、応答の一部としてヘッダーを設定することにより、リソースを保護する必要があります。

リソースの提供を担当するオリジンは、このヘッダーを設定する必要があることを覚えておいてください。

このヘッダーの使用方法と渡すタイミング

設定できる値の例を次に示します。

  1. Access-Control-Allow-Origin : * :任意の原点を許可します。
  2. Access-Control-Allow-Origin : //mysite.com :mysite.comからのリクエストのみを許可します。

実際に見てください

例を見てみましょう。このコードは私のGitHubリポジトリで確認できます。

sの//localhost:8000文字列をエンドポイントに送信するオリジンA上にサーバーを構築します。オリジンBにクライアントを作成してこのエンドポイントで呼び出し、フェッチを使用してリソースをリクエストします。オリジンBのブラウザコンソールに、オリジンAから渡された文字列が表示されることを期待しています。Helloapi//localhost:3000Hello

エンドポイントで//localhost:8000このリソースを提供するオリジンが上にあるとしましょう/api。サーバーはヘッダー付きの応答を送信しますAccess-Control-Allow-Origin

const express = require("express"); const app = express(); const port = process.env.SERVER_PORT || 8000; // Add Access Control Allow Origin headers app.use((req, res, next) => { res.setHeader("Access-Control-Allow-Origin", "//yoursite.com"); res.header( "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept" ); next(); }); app.get("/api", (req, res) => { res.json("Hello"); }); app.listen(port, () => console.log(`Listening on port ${port}`)); 

クライアント側では、次のように呼び出すことで、このエンドポイントを呼び出すことができますfetch

fetch('//localhost:8000/api') .then(res => res.json()) .then(res => console.log(res)); 

次に、ブラウザのコンソールを開いて結果を確認します。

ヘッダーは現在//yoursite.com、からのアクセスのみを許可するように設定されているため、ブラウザはリソースへのアクセスをブロックし、コンソールにエラーが表示されます。

ここで、これを修正するには、ヘッダーを次のように変更します。

 res.setHeader("Access-Control-Allow-Origin", "*"); 

ブラウザのコンソールを確認すると、文字列が表示されますHello

私からのより多くのチュートリアルとJSBytesに興味がありますか?私のニュースレターにサインアップしてください。