フロントエンドのユーザーとして、サーバーにデータをリクエストするためにインターフェースを呼び出す必要があることがよくありますが、期待するデータが得られないことがありますが、エラーが報告され、Access-control-Allow-Originが表示されます。

エラーメッセージは、クロスドメインの状況があることを示しています。クロスドメインの問題を解決する前に、まずそれがクロスドメインである理由を理解する必要があります。

ホモロジー戦略

ホモロジーとは、ドメイン名、プロトコル、ポートが同じであることを意味します。いわゆる「同一生成元ポリシー」は、セキュリティ上の考慮事項に基づいて、現在のドメインが他のドメインにアクセスできないことを単に意味します。したがって、クロスドメインの問題が発生します

同一生成元ポリシーでは、特定のサーバーのページはサーバーの外部のデータを取得できません。それ以外の場合は、次の状況が発生します

ただし、<img>src（画像を取得）と<script>src（javascriptを取得）はどちらも同一生成元ポリシーに準拠していないため、ドメイン間でデータを取得できます。ここで紹介するJSONPは、<script>srcを使用してクロスドメインのデータ取得を実現することです。

JSONP

JSONPによるクロスドメインリクエストの実装の原則は<script>、動的にタグを作成し<script>、srcを使用して、同じ生成元のポリシーに制約されずにドメイン間でデータを取得することです。ただ

関数呼び出しとして、インターフェースをページへのjsonファイルとして導入します

JSONPは、コールバック関数とデータの2つの部分で構成されています。コールバック関数は、応答が到着したときにページで呼び出される関数です。コールバック関数の名前は通常、リクエストで指定されます。データは、コールバック関数に渡されるJSONデータです。

1 <script type = "text / javascript">
 2      // 返されたJSONは、コールバック関数を介してデータを操作するためのパラメーターとしてコールバック関数に渡されます
3        関数handleResponse（応答）{
 4                console.log（応答）;
 5  　　}
 6    
7         window.onload = function （）{
 8               var oBtn = document.getElementById（ 'btn' ）;
 9                oBtn.onclick = function （）{ 
 10                       // <script>タグを動的に作成し、そのsrcを設定し、コールバック関数をsrcに設定します     
11                       var script = document.createElement（ "script" ）;
 12                       script.src = "https：// xxx＆callback = handleResponse" ;
13                        document.body.insertBefore（script、document.body.firstChild）;   
14                  };
15           }
 16 </ script>

1. JSONPの利点は、XMLHttpRequestオブジェクトによって実装されるAjaxリクエストと同じ生成元のポリシーによって制限されないことです。JSONPは互換性が高く、XMLHttpRequestまたはActiveXのサポートなしで古いブラウザーで実行できます。そしてリクエストが完了した後、コールバックを呼び出すことで結果を返すことができます。

2. JSONPの欠点は、GETPリクエストのみをサポートし、POSTなどの他のタイプのHTTPリクエストをサポートしないことです。

3. JSONPの最も基本的な原則は、<script>タグを動的に追加し、スクリプトタグのsrc属性がクロスドメインによって制限されないことです。つまり、このクロスドメインアプローチは、ajax XmlHttpRequestプロトコルとは何の関係もありません。

jQueryパッケージJSONP

            $ .ajax（{ 
                url： "https：// xxx" 、
                type： "GET" 、 dataType 
                ： "jsonp"、// 返されるデータタイプ、JSONPに設定 
                成功：function （res）{ 
                    console.log（res ）; 
                } 
             }）;

$ .getJSON（）

getJSONを使用して、callback =？パラメータがアドレスに追加されている限り、参照コードは次のようになります。

          $ .getJSON（ "https：// xxx＆callback =？"、function （data）{ 
                console.log（data）; 
           }）;

ハーツ

CORSは、クロスオリジンリソースシェアリング（クロスオリジンリソースシェアリング）の略で、HTML5仕様で定義されているように、ドメイン間でリソースにアクセスする方法です。

Originは、ブラウザの現在のページのドメインであるドメインを示します。JavaScriptが外部ドメイン（sina.comなど）へのリクエストを開始した後、応答を受信した後、ブラウザーは最初にAccess-Control-Allow-Originにこのドメインが含まれているかどうかを確認します。リクエストが失敗した場合、JavaScriptはレスポンスのデータを取得できません。

ローカルドメインがmy.com、外部ドメインがsina.com、応答ヘッダーAccess-Control-Allow-Originがhttp://my.comである限り、またはyes *であると仮定すると、この要求は成功する可能性があります。

CORSのプロセス全体はブラウザーによって自動的に完了し、フロントエンドで設定を行う必要はありません。また、通常のajaxリクエストの送信と違いはありません。したがって、CORSを実装するための鍵はサーバーであり、サーバーが正しくセットアップされていればAccess-Control-Allow-Origin、クロスドメイン通信を実現できます。

リクエストタイプ：

CORSは、単純な要求と非単純な要求に分かれています（事前チェック要求が必要）

以下を満たすことは単純な要求ですが、それ以外の場合は単純な要求ではありません

リクエストメソッドは、次のいずれかのメソッドを使用します
。GET 
HEAD 
POST 
 
Content - Typeの値は、次の3つのうちの1つに制限され
ます：text / plain 
multipart / form-data 
application / x-www-form-urlencoded

サンプルコード、例としてnode.jsを取ります

var express = require（ 'express' ）;
 var app = express（）;
 var allowCrossDomain = function （req、res、next）    
  res.header（ 'Access-Control-Allow-Origin'、 'http：// localhost：3001 ' ）; //このフィールドは、クロスドメインで使用できるソースを示します
} 
app.use（allowCrossDomain）;

一般に、CORSシンプルリクエストを使用する場合、フロントエンドの構成は必要ありません。通常のajaxリクエストを送信するのと同じです。CORSの構成はバックエンドで完全に設定されており、構成は比較的簡単です。 getリクエストを使用できることは、私たちにとっても便利です。

クロスドメインリクエストの処理