ブラウザのドメイン間リクエストの問題を解決する方法
3111 ワード
AngularまたはjQueryまたはXHRリクエストを使用している場合は、サーバーに「おい、POST/GETリクエストを送信しています.パラメータを持ってきました.応答してもらえますか?」と言います.残念なことに、あなたのブラウザコンソールは「ねえ、サーバーの情報を得ることはできません.No'Access-Control-Allow-Origin」header is present on the requested resource.Origin'null'is therefore not allowed access」と教えてくれます.そして、いろいろな資料をめくって、もともとドメインを越えた問題で、最後に何らかの方法でこの問題を解決しました.しかし、ドメイン間リクエストは何ですか?ドメイン間の問題をどのように解決しますか?まず理解しなければなりません
SOPとは
SOP(Same-origin policy)はコンピュータにおいて,同源戦略がwebアプリケーションセキュリティモードにおける重要な概念である.このポリシーの影響で、ブラウザは1つのページのスクリプトで別のページのデータを取得することを許可しますが、この場合は2つのページが同じソースを持っていることに限られます.このソースは要求プロトコル、ドメイン名、ポート番号で構成されており、3つのうち、1つの違いがあれば異なるソースとみなされます.同源ポリシーは、HTMLラベルに埋め込まれたimages、CSS、scriptsのようなスクリプトによってデータを取得する上で、悪意のあるスクリプトによるリスクを阻止します.では、いくつかの開発状況では、同源戦略の限界が大きすぎて、私たちはどのように彼を解決すればいいのでしょうか.
CORS
CORSはW 3 C規格であり、全称は「クロスドメインリソース共有」(Cross-origin resource sharing)であり、クロスドメインリクエストソリューションの一つでもある.これにより、ブラウザがソース間(プロトコル+ドメイン名+ポート)サーバに要求を発行し、Ajaxがソースとしか使用できない問題を解決できます.
CORSはどのように働いていますか?
CORS規格は、ブラウザおよびサーバに権限が許可されている場合にのみリモートURLを要求する方法を提供する新しいHTTP headers情報を記述する.ブラウザがCORS非単純リクエストを発行すると、正式な通信の前にHTTPクエリーリクエストが1回追加され、「プリチェックリクエスト(preflight)」と呼ばれます.ブラウザはまず、現在のWebページが存在するドメイン名がサーバのライセンスリストにあるかどうか、およびどのHTTP動詞とヘッダ情報フィールドを使用できるかをサーバに尋ねます.その後、サーバーが承認応答を送信すると、ブラウザは正式なHTTP要求を発行します.そうしないと、エラーが発生します.サーバはまた、CookieおよびHTTP認証データを含む要求された「認証情報」をクライアントに送信すべきかどうかを通知することもできる.
簡単な例
ブラウザがソース間リクエストを送信しようとすると、次のようになります.当http://www.example.comサービスでリクエストしようとします.example.comサービス上のユーザ情報の場合、以下の要求ヘッダがサービスに送信.example.com
2.サービスでexample.comのサーバからの応答:応答のヘッダ情報Access-Control-Allow-Origin(ACAO)は、サーバリソースにアクセスできるリクエストソースを宣言します.たとえば、 サーバが要求元を許可しない場合、ページは とエラーを報告する.が応答するヘッダ情報Access-Control-Allow-Origin(ACAO)は、ワイルドカードを設定することができ、ソースがサーバリソースにアクセスすることを許可し、1つのページまたはAPI応答が完全に公開されたコンテンツとみなされる場合、ワイルドカード同源ポリシーは適用される である.
「*」の値は、証明書の要求が許可されていないため特殊です.これは、ドメイン間要求でHTTP認証、クライアントSSL証明書、またはクッキーの送信が許可されていないことを意味します.
HTTP Headers
CORSに関するHTTP headersは次のとおりです.
1.Request headers Origin Access-Control-Request-Method Access-Control-Request-Headers
2.Response headers Access-Control-Allow-Origin Access-Control-Allow-Credentials Access-Control-Expose-Headers Access-Control-Max-Age Access-Control-Allow-Methods Access-Control-Allow-Headers
CORS vs JSONP
JSONPはドメイン間リクエストの解決方法でもあり、CORSはJSONPモードの代替品として使用でき、JSONPはGETリクエスト方法のみをサポートするが、CORSは他のタイプのHTTPリクエストもサポートする.CORSを使用すると、WebプログラマーはJSONPよりも優れたエラー処理メカニズムのXMLhttpRequestを使用することができます.一方、JSONPの従来のブラウザにも対応しており、CORSにも対応しており、現代のブラウザでもCORSに対応しています.JSONPは、外部サイトが損傷した場合、サイト間スクリプト(XSS)の問題を引き起こす可能性がありますが、CORSでは、Webサイトが手動で応答を解析してセキュリティを確保できます.
なぜPOSTTMAMでデータリクエストをすればいいのでしょうか?
POSTMANはブラウザではなく開発ツールなので
結論
積み重ねて積み重ねて、絶えず勉強して、少し
学习に対して情热を持つ开発の小さい仲间はqq群685421881に参加することを歓迎して、群主の女の子、更にプログラミングを爱する妹を歓迎して入って、私达にいっしょに学习して进歩させましょう!
SOPとは
SOP(Same-origin policy)はコンピュータにおいて,同源戦略がwebアプリケーションセキュリティモードにおける重要な概念である.このポリシーの影響で、ブラウザは1つのページのスクリプトで別のページのデータを取得することを許可しますが、この場合は2つのページが同じソースを持っていることに限られます.このソースは要求プロトコル、ドメイン名、ポート番号で構成されており、3つのうち、1つの違いがあれば異なるソースとみなされます.同源ポリシーは、HTMLラベルに埋め込まれたimages、CSS、scriptsのようなスクリプトによってデータを取得する上で、悪意のあるスクリプトによるリスクを阻止します.では、いくつかの開発状況では、同源戦略の限界が大きすぎて、私たちはどのように彼を解決すればいいのでしょうか.
CORS
CORSはW 3 C規格であり、全称は「クロスドメインリソース共有」(Cross-origin resource sharing)であり、クロスドメインリクエストソリューションの一つでもある.これにより、ブラウザがソース間(プロトコル+ドメイン名+ポート)サーバに要求を発行し、Ajaxがソースとしか使用できない問題を解決できます.
CORSはどのように働いていますか?
CORS規格は、ブラウザおよびサーバに権限が許可されている場合にのみリモートURLを要求する方法を提供する新しいHTTP headers情報を記述する.ブラウザがCORS非単純リクエストを発行すると、正式な通信の前にHTTPクエリーリクエストが1回追加され、「プリチェックリクエスト(preflight)」と呼ばれます.ブラウザはまず、現在のWebページが存在するドメイン名がサーバのライセンスリストにあるかどうか、およびどのHTTP動詞とヘッダ情報フィールドを使用できるかをサーバに尋ねます.その後、サーバーが承認応答を送信すると、ブラウザは正式なHTTP要求を発行します.そうしないと、エラーが発生します.サーバはまた、CookieおよびHTTP認証データを含む要求された「認証情報」をクライアントに送信すべきかどうかを通知することもできる.
簡単な例
ブラウザがソース間リクエストを送信しようとすると、次のようになります.
Origin: http://www.example.com
2.サービスでexample.comのサーバからの応答:
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Origin: *
「*」の値は、証明書の要求が許可されていないため特殊です.これは、ドメイン間要求でHTTP認証、クライアントSSL証明書、またはクッキーの送信が許可されていないことを意味します.
HTTP Headers
CORSに関するHTTP headersは次のとおりです.
1.Request headers
2.Response headers
CORS vs JSONP
JSONPはドメイン間リクエストの解決方法でもあり、CORSはJSONPモードの代替品として使用でき、JSONPはGETリクエスト方法のみをサポートするが、CORSは他のタイプのHTTPリクエストもサポートする.CORSを使用すると、WebプログラマーはJSONPよりも優れたエラー処理メカニズムのXMLhttpRequestを使用することができます.一方、JSONPの従来のブラウザにも対応しており、CORSにも対応しており、現代のブラウザでもCORSに対応しています.JSONPは、外部サイトが損傷した場合、サイト間スクリプト(XSS)の問題を引き起こす可能性がありますが、CORSでは、Webサイトが手動で応答を解析してセキュリティを確保できます.
なぜPOSTTMAMでデータリクエストをすればいいのでしょうか?
POSTMANはブラウザではなく開発ツールなので
結論
積み重ねて積み重ねて、絶えず勉強して、少し
学习に対して情热を持つ开発の小さい仲间はqq群685421881に参加することを歓迎して、群主の女の子、更にプログラミングを爱する妹を歓迎して入って、私达にいっしょに学习して进歩させましょう!