tl; dr; 同一生成元ポリシーについて

express.jsサーバーのインスタンスを開始するGruntプロセスがあります。これは、Chrome（最新バージョン）の開発者コンソールのエラーログに次のように表示される空白のページの提供を開始するまで、まったく問題なく機能していました。

XMLHttpRequestはhttps://www.example.com/を読み込め ません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost：4300 'はアクセスを許可されていません。

ページへのアクセスを妨げているのは何ですか？

tl; dr —関連する部分を見つけやすくするために、回答の最後と見出しに要約があります。ただし、すべてを読むことをお勧めします。これは、さまざまな状況でどのように適用されるかを理解しやすくする理由を理解するための有用な背景を提供するためです。

同一生成元ポリシーについて

これは同一生成元ポリシーです。これは、ブラウザによって実装されるセキュリティ機能です。

あなたの特定のケースは、それがXMLHttpRequestのために実装されている方法を示している（そして、あなたがフェッチを使用した場合、あなたは同じ結果を得るでしょう）、それはまた、（画像などにロードされた他のものにも適用される<canvas>かにロードされた文書<iframe>）だけでわずかに異なる実装。

（奇妙なことに、これはCSSフォントにも適用されますが、これは、同一生成元ポリシーが通常カバーするセキュリティの問題ではなく、見つかったファウンドリがDRMを主張したためです）。

SOPの必要性を示す標準的なシナリオは、次の3文字で示すことができます。

• アリスはウェブブラウザを持っている人です
• ボブはウェブサイトを運営しています（https://www.[website].com/あなたの例では）
• マロリーはウェブサイトを運営しています（http://localhost:4300あなたの例では）

アリスはボブのサイトにログインしていて、そこにいくつかの機密データがあります。おそらくそれは会社のイントラネット（LAN上のブラウザにのみアクセス可能）または彼女のオンラインバンキング（ユーザー名とパスワードを入力した後に取得したCookieでのみアクセス可能）です。

アリスはマロリーのウェブサイトにアクセスします。JavaScriptがあり、アリスのブラウザがボブのウェブサイトにHTTPリクエストを送信します（彼女のIPアドレスとCookieなどから）。これは、を使用XMLHttpRequestして読み取るのと同じくらい簡単responseTextです。

ブラウザの同一生成元ポリシーは、JavaScriptがボブのウェブサイトから返されたデータ（ボブとアリスがマロリーにアクセスさせたくないデータ）を読み取らないようにします。（たとえば、画像<img>のコンテンツはJavaScript（またはマロリー）に公開されていないため、原点を越えて要素を使用して画像を表示できることに注意してください...キャンバスをミックスに投入しない限り、同じ原点を生成します違反エラー）。

同一生成元ポリシーが適用されるべきではないと思われるのになぜ適用されるのか

特定のURLについて、SOPが不要である可能性があります。これが当てはまる一般的なシナリオは次のとおりです。

• アリス、ボブ、マロリーは同じ人です。
• ボブは完全に公開情報を提供しています

…しかし、ブラウザには上記のいずれかが当てはまるかどうかを知る方法がないため、信頼は自動ではなく、SOPが適用されます。ブラウザが別のウェブサイトに提供されたデータを提供する前に、許可を明示的に付与する必要があります。

同一生成元ポリシーがWebページのJavaScriptにのみ適用される理由

ブラウザ拡張機能*、ブラウザ開発ツールの[ネットワーク]タブ、Postmanなどのアプリケーションはインストールされたソフトウェアです。彼らは別のウェブサイトに属するJavaScriptに1つのウェブサイトからのデータを渡していないあなたは、異なるウェブサイトを訪問したという理由だけで。ソフトウェアのインストールは通常、より意識的な選択をします。

リスクとみなされる第三者（マロリー）は存在しません。

*クロスオリジンの問題を回避するために、ブラウザ拡張機能は慎重に作成する必要があります。たとえば、Chromeのドキュメントを参照してください。

JSで読み取らずにページにデータを表示できる理由

マロリーのサイトがブラウザにサードパーティからデータをフェッチして表示させる可能性がある状況はいくつかあります（たとえば<img>、画像を表示する要素を追加することによって）。マロリーのJavaScriptがそのリソースのデータを読み取ることはできませんが、アリスのブラウザとボブのサーバーのみが読み取ることができるため、安全です。

CORS

Access-Control-Allow-OriginHTTPのレスポンスヘッダは、エラーメッセージで参照さの一部であるCORSのボブが明示的にアリスのブラウザを介してアクセスするマロリーのサイトへのデータのアクセス許可を付与することを可能にする標準。

基本的な実装には、次のものが含まれます。

Access-Control-Allow-Origin: *

…応答ヘッダーで、任意のWebサイトがデータを読み取れるようにします。

Access-Control-Allow-Origin: http://example.com/

…特定のサイトのみにアクセスを許可し、ボブはOrigin リクエストヘッダーに基づいて動的に生成して、すべてではありませんが複数のサイトにアクセスを許可できます。

ボブがその応答ヘッダーを設定する方法の詳細は、ボブのHTTPサーバーやサーバー側のプログラミング言語によって異なります。あり、様々な一般的な構成のためのガイドのコレクションそのかもしれないのヘルプが。

注意：一部のリクエストは複雑で、ブラウザがGET / POST / PUT / JSが作成したいリクエストを送信する前にサーバーが応答する必要があるプリフライトOPTIONSリクエストを送信します。Access-Control-Allow-Origin特定のURLにのみ追加するCORSの実装は、これによってつまずくことがよくあります。

明らかに、CORSを介して許可を与えることは、ボブが次のいずれかの場合にのみ行うことです。

• データは非公開ではなかったか、
• マロリーは信頼されていた

しかし、私はボブではありません！

マロリーがこのヘッダーを追加するための標準的なメカニズムはありません。これは、マロリーが管理していないボブのWebサイトから取得する必要があるためです。

ボブがパブリックAPIを実行している場合、CORSをオンにするメカニズムがある可能性があります（おそらく、特定の方法でリクエストをフォーマットするか、ボブのサイトの開発者ポータルサイトにログインした後の構成オプションによって）。ただし、これはボブによって実装されたメカニズムである必要があります。マロリーはボブのサイトのドキュメントを読んで何かが利用可能かどうかを確認するか、ボブと話してCORSを実装するように依頼することができます。

「プリフライトへの対応」に関するエラーメッセージ

一部のクロスオリジンリクエストはプリフライトされます。

これは、（大まかに言えば）次のようなクロスオリジンリクエストを行おうとしたときに発生します。

• Cookieなどの資格情報が含まれています
• 通常のHTMLフォームでは生成できませんでした（たとえば、フォームで使用できないカスタムヘッダーまたはContent-Typeがありますenctype）。

プリフライトが必要なことを正しく行っている場合

これらのケースでは、その後、この答えの残りの部分は引き続き適用されますが、サーバーがされる（プリフライトリクエストをリッスンできることを確認する必要がありますOPTIONS（とないGET、POSTまたはあなたが右にそれを送信しよう）と応答し、何でもAccess-Control-Allow-Originヘッダだけでなく、Access-Control-Allow-MethodsおよびAccess-Control-Allow-Headers特定のHTTPメソッドやヘッダを許可します。

誤ってプリフライトをトリガーした場合

Ajaxリクエストを作成しようとするときに間違いを犯すことがあり、プリフライトの必要性を引き起こすこともあります。APIがクロスオリジンリクエストを許可するように設計されているが、プリフライトを必要とするものを必要としない場合、これによりアクセスが中断される可能性があります。

これを引き起こす一般的な間違いは次のとおりです。

• Access-Control-Allow-Originリクエストに他のCORSレスポンスヘッダーを配置しようとしています。これらはリクエストに属しておらず、何も役に立たず（自分に権限を付与できる権限システムのポイントは何でしょうか）、応答にのみ表示される必要があります。
• 置くしようとしているContent-Type: application/json（通常、著者の混乱の内容を説明するために何のリクエストボディがないGET要求にヘッダをContent-TypeしてAccept）を。

どちらの場合でも、余分なリクエストヘッダーを削除するだけで、プリフライトの必要性を回避できます（これにより、プリフライトリクエストではなく単純なリクエストをサポートするAPIと通信する際の問題が解決されます）。

不透明な応答

HTTPリクエストを行う必要がある場合もありますが、レスポンスを読み取る必要はありません。たとえば、記録のためにログメッセージをサーバーに投稿する場合。

（ではなく）APIを使用しているfetch場合は、XMLHttpRequest CORSを使用しないようにAPIを構成できます。

これでは、CORSに必要なことは何もできません。応答を読み取ることができなくなります。プリフライトが必要なリクエストはできません。

これにより、簡単な要求を行ったり、応答を表示したり、開発者コンソールにエラーメッセージを表示したりすることができなくなります。

その方法は、を使用fetchしてリクエストを行い、CORSでレスポンスを表示する権限を取得していない場合に表示されるChromeエラーメッセージで説明されています。

https://example.com/オリジン' 'からの' 'でのフェッチへのアクセスhttps://example.netはCORSポリシーによってブロックされています：いいえ ' Access-Control-Allow-Origin'ヘッダーは要求されたリソースに存在します。不透明な応答がニーズに対応する場合は、リクエストのモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。

したがって：

fetch("http://example.com", { mode: "no-cors" });

CORSの代替

JSONP

ボブは、JSONPとは何ですか、なぜそれが作成されたのですか？ようなハックを使用してデータを提供することもできます。これは、CORSが登場する前に人々がクロスオリジンのAjaxを実行した方法です。

これは、データをマロリーのページに挿入するJavaScriptプログラムの形式でデータを提示することによって機能します。

マロリーがボブを信頼して悪意のあるコードを提供しないようにする必要があります。

共通のテーマに注意してください。データを提供するサイトは、サードパーティのサイトがブラウザに送信しているデータにアクセスしても問題がないことをブラウザに通知する必要があります。

JSONP<script>は、ページに既に存在する関数を呼び出すJavaScriptプログラムの形式でデータをロードする要素を追加することで機能するため、JSONを返すURLでJSONP手法を使用しようとすると、失敗します（通常、CORBエラーが発生します）。 JavaScriptではありません。

2つのリソースを1つのオリジンに移動します

JSが実行されるHTMLドキュメントで、要求されているURLが同じオリジン（同じスキーム、ホスト名、およびポートを共有）にある場合、それらの同一生成元ポリシーはデフォルトでアクセス許可を付与します。CORSは必要ありません。

プロキシ

マロリーはサーバー側のコードを使用してデータをフェッチできます（その後、通常どおりHTTPを介してサーバーからアリスのブラウザーにデータを渡すことができます）。

次のいずれかになります。

• CORSヘッダーを追加する
• 応答をJSONPに変換します
• HTMLドキュメントと同じオリジンに存在します

そのサーバーサイドコードは、サードパーティ（CORS Anywhereなど）によって記述およびホストされる可能性があります。これがプライバシーに与える影響に注意してください。サードパーティは、サーバー全体で誰が何をプロキシするかを監視できます。

ボブは、そのために権限を付与する必要はありません。

マロリーとボブの間だけなので、ここではセキュリティへの影響はありません。ボブがマロリーをアリスであると考え、アリスとボブの間で秘密にすべきデータをマロリーに提供する方法はありません。

したがって、マロリーはこの手法を使用して公開データを読み取ることしかできません。

ただし、他人のWebサイトからコンテンツを取得して自分で表示すると、著作権が侵害され、法的措置が取られる可能性があることに注意してください。

Webアプリ以外のものを書く

「同一生成元ポリシーがWebページのJavaScriptにのみ適用される理由」のセクションで説明したように、WebページにJavaScriptを記述しないことで、SOPを回避できます。

これは、JavaScriptとHTMLを引き続き使用できないという意味ではありませんが、Node-WebKitやPhoneGapなどの他のメカニズムを使用して配布することはできます。

ブラウザ拡張機能

同一生成元ポリシーが適用される前に、ブラウザー拡張機能が応答にCORSヘッダーを挿入する可能性があります。

これらは開発には役立ちますが、実稼働サイトには実用的ではありません（サイトのすべてのユーザーに、ブラウザーのセキュリティ機能を無効にするブラウザー拡張機能をインストールするように依頼するのは無理です）。

また、単純なリクエストでのみ機能する傾向があります（プリフライトOPTIONSリクエストの処理時に失敗します）。

通常、ローカル開発サーバーを使用して適切な開発環境を用意することをお勧めします。

その他のセキュリティリスク

SOP / CORSは、独立して処理する必要があるXSS、CSRF、またはSQLインジェクション攻撃を軽減しないことに注意してください。

概要

• あなたができることは何もありませんあなたの誰かにCORSアクセス可能にするクライアント側のコード、他のサーバが。
• サーバーを制御している場合、リクエストは次のように行われます。サーバーにCORSアクセス許可を追加します。
• あなたがそれを管理している人と友好的であるならば：彼らにそれにCORS許可を追加するように頼んでください。
• 公共サービスの場合：
  • APIドキュメントを読んで、クライアントサイドJavaScriptを使用してアクセスすることについて彼らが言っていることを確認してください。
    • 特定のURLを使用するように指示される場合があります
    • JSONPをサポートしている可能性があります
    • クライアント側のコードからのクロスオリジンアクセスをまったくサポートしていない可能性があります（これは、特に各リクエストでパーソナライズされたAPIキーを渡す必要がある場合は、セキュリティ上の理由から意図的に決定される可能性があります）。
  • 不要なプリフライトリクエストをトリガーしていないことを確認してください。APIは、単純なリクエストには権限を付与しますが、プリフライトリクエストには権限を付与しない場合があります。
• 上記のいずれにも該当しない場合は：と交信するためにブラウザを取得し、あなたの代わりに、サーバ、および、あなたのサーバーが他のサーバーからデータを取得し、それを渡す必要があります。（CORSヘッダーを公的にアクセス可能なリソースに添付して使用できるサードパーティのホスト型サービスもあります）。

ターゲットサーバーはクロスオリジンリクエストを許可する必要があります。Expressを介して許可するには、httpオプションリクエストを処理するだけです。

app.options('/url...', function(req, res, next){
   res.header('Access-Control-Allow-Origin', "*");
   res.header('Access-Control-Allow-Methods', 'POST');
   res.header("Access-Control-Allow-Headers", "accept, content-type");
   res.header("Access-Control-Max-Age", "1728000");
   return res.sendStatus(200);
});

これは受け入れられた答えに言及されていないので。

• これはこの正確な質問には当てはまりませんが、その問題を検索する他の人を助けるかもしれません
• これは、あなたがCORSエラーを防止するために、あなたのクライアントコードで行うことができるものである場合。

シンプルリクエストを利用できます。
「単純な要求」を実行するには、要求がいくつかの条件を満たす必要があります。たとえばPOST、GETとHEADメソッドのみを許可し、特定のヘッダーのみを許可します（すべての条件はここにあります）。

クライアントコードが影響を受けるヘッダー（「Accept」など）をリクエストの修正値で明示的に設定しない場合、一部のクライアントがこれらのヘッダーをいくつかの「非標準」値で自動的に設定し、サーバーがそれを受け入れないようにする可能性があります。単純なリクエスト-CORSエラーが発生します。

これは、CORSエラーが原因で発生しています。CORSはCrossOrigin ResourceSharingの略です。簡単に言うと、このエラーは、別のドメインからドメイン/リソースにアクセスしようとしたときに発生します。

詳細はこちら：jqueryでのCORSエラー

これを修正するには、他のドメインにアクセスできる場合は、サーバーでAccess-Control-Allow-Originを許可する必要があります。これはヘッダーに追加できます。これは、すべてのリクエスト/ドメインまたは特定のドメインに対して有効にできます。

クロスオリジンリソースシェアリング（CORS）ポストリクエストを機能させる方法

これらのリンクは役立つかもしれません

このCORSの問題は、（他の原因のために）これ以上詳しく説明されていません。

現在、さまざまな理由でこの問題が発生しています。私のフロントエンドは、「Access-Control-Allow-Origin」ヘッダーエラーも返しています。

間違ったURLを指定したため、このヘッダーが適切に反映されませんでした（私はそれが反映されていると推測し続けました）。localhost（フロントエンド）->保護されていないhttp（httpsと想定）への呼び出し。フロントエンドからのAPIエンドポイントが正しいプロトコルを指していることを確認します。

Chromeコンソールでも同じエラーが発生しました。

私の問題は、のhttp://代わりにを使用してサイトにアクセスしようとしていたことでしたhttps://。したがって、修正するものはなく、を使用して同じサイトに移動する必要がありましたhttps。

このバグは私に2日かかりました。サーバーログを確認しましたが、ブラウザのChrome / Edgeとサーバー間のプリフライトオプションのリクエスト/レスポンスは問題ありませんでした。主な理由は、XHTMLRequestに対するGET / POST / PUT / DELETEサーバーの応答にも次のヘッダーが必要であるためです。

access-control-allow-origin: origin  

「origin」はリクエストヘッダーにあります（ブラウザがリクエストに追加します）。例えば：

Origin: http://localhost:4221

次のような応答ヘッダーを追加して、すべてを受け入れることができます。

access-control-allow-origin: *  

または、次のような特定のリクエストの応答ヘッダー：

access-control-allow-origin: http://localhost:4221 

ブラウザのメッセージを理解するのは明確ではありません：「...要求されたリソース」

注： CORSはローカルホストでうまく機能します。異なるポートは異なるドメインを意味します。エラーメッセージが表示された場合は、サーバー側のCORS設定を確認してください。