JSONP Web ページで js ファイルを呼び出す場合、「src」属性を持つすべてのタグには、 や < などのクロスドメイン機能があることがわかりました。 ;img>、<iframe>。つまり、ドメインを越えてデータにアクセスしたい場合、サーバーはデータを js 形式のファイルに置くことしかできません。たまたま、JSON が複雑なデータを簡潔に記述できることがわかっており、JSON も js でネイティブにサポートされているため、クライアントはこの形式のデータをほぼ希望どおりに処理できます。その後、クライアントは、スクリプトを呼び出すのとまったく同じ方法で、クロスドメイン サーバー上で動的に生成された js 形式のファイルを呼び出すことができます。クライアントは JSON ファイルの呼び出しに成功すると、必要なデータを取得します。これが JSONP の基本概念を形成します。ユーザーはコールバック パラメーターをサーバーに渡すことができ、サーバーがデータを返すときに、このコールバック パラメーターを関数名として使用して JSON データをラップし、クライアントが独自の関数をカスタマイズして返されたデータを自動的に処理できるようにします。データ。 </iframe></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function dll(response){ alert(response.city); } var script=document.createElement("script"); script.src="http://freegeoip.net/json/?callback=dll"; document.body.insertBefore(script,document.body.firstChild);</pre><div class="contentsignin">ログイン後にコピー</div></div><p> 3 つのステップ: スクリプトを作成し、src を指定し、ドキュメントに挿入します。 </p> <p>jQuery は JSONP 呼び出しをサポートしています。別のドメイン名でコールバック関数名を指定した後、次のフォームを使用して JSON データをロードできます。 <br>url?callback=?<br>jQuery.getJSON(url + "&callback=?", function(data) { <br>alert(data.a + data.b); <br>});<br>もちろん、サーバーは JSONP サポートも提供する必要があります、実際には、読み取りおよび書き込みコールバックのパラメータを指定するだけです。 <br>Cross-Origin Resource Sharing (CORS) <br>Cross-Origin Resource Sharing (CORS) は、ドメインを越えてリソースにアクセスする際のブラウザーとサーバーの通信方法を定義する W3c 作業草案です。 CORS の背後にある基本的な考え方は、カスタム HTTP ヘッダーを使用して、ブラウザーとサーバーが相互に理解し、要求または応答が成功したかどうかを判断できるようにすることです。 </p> <p>JSONP と比較して、CORS はより高度で、便利で、信頼性があります。 </p> <p>1. JSONP は GET リクエストのみを実装できますが、CORS はすべての種類の HTTP リクエストをサポートします。 <br>2. CORS を使用すると、開発者は通常の XMLHttpRequest を使用してリクエストを開始し、データを取得できます。これにより、JSONP よりも優れたエラー処理が可能になります。 <br>3. JSONP は主に古いブラウザーでサポートされており、多くの場合 CORS をサポートしていませんが、最新のブラウザーのほとんどはすでに CORS をサポートしています。 <br>カスタム ヘッダーのない単純なリクエストの場合は、GET または POST を使用し、その本文は text/plain で、リクエストは Origin と呼ばれる追加ヘッダーとともに送信されます。 Origin ヘッダーには、要求されたページのヘッダー (プロトコル、ドメイン名、ポート) が含まれているため、サーバーは応答を提供する必要があるかどうかを簡単に決定できます。 <br>サーバー側は主に Access-Control-Allow-Origin を設定することで CORS をサポートします。 <br>ヘッダー セット Access-Control-Allow-Origin * <br>サーバーへの XSS 攻撃を防ぐために、<br>Access-Control-Allow-Origin: http://blog.csdn.net<br>多くのサービスなどのドメインを制限できますCORS サポートにより、たとえば AWS はクロスドメイン リソース共有機能 CORS をサポートしており、S3 へのアップロードにプロキシは必要ありません。 </p> <p><br></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
