アリP7アーキテクトは、クロスドメインの問題を解決する方法です！あなたはそれに遭遇することがありますか？

より多くのプロジェクトは、バックエンドの管理も非常に多くの学生をクロスドメイン、クロスドメインの問題を生じ前に、分離の終了後に、時代の流れに合致して置くために、それを行うには前と分離された道の展開が終了した後に使用する傾向があり、今ある場合でも、前と後に一緒にリンクされた分離プロジェクトの終わり、実際には、クロスドメインの前に発生したので、分離の終わりが原因ではないの後、我々は我々がドメインを横断すべての質問に答えるためにその記事に頼ることを期待して、一緒に見て

クロスドメインを生じる状態

使用XMLHttpRequestが、つまり、我々は通常、AJAX要求を言います
このことを行うには、ブラウザ
異なるドメイン名、つまりhtmlページへのアクセスは、ドメイン名の下ですが、ドメイン名によって送信されたターゲットアドレス内部JSのAJAX要求をb

モバイル端末双双のhttpリクエストはクレイジー髪の異なるドメインさまざまな方法を使っているため、これら3つの条件が、特にモバイル端末は聞いたことがないかもしれません学生の多くの第三条件に、不可欠ですが、ブラウザは、私たちはそうすることはできません。、ワード安全性

第二に、クロスドメインの問題を解決する方法

私たちは1つのブレークでの方法1を見て、問題のクロスドメインのルートを解決するためには、3つの上記の制限のいずれかを破るためにあります

JSONPの道

AJAX要求JSONPはjqueryののビューJSONP期間で、その後、私はこの方法ではありませんし、どのように私たちは、ドメイン間のXMLHttpRequestの使用に重い制約を破ることは最初であります

$.ajax({
   type : "GET",
   url : "http://api.map.baidu.com/geocoder/v2/",
   data:"address=上海",
   dataType:"jsonp",
   jsonp:"callback",
   jsonpCallback:"showLocation",
   success : function(data){
       alert("成功");
   },
   error : function(data){
       alert("失败");
   }
});

一見、AJAXリクエストで、実際には、完全ではない場合、その内のjsonpCallback JSONPより多くのオプション内のページ上のコードと、このような方法で動作し、DOMを翻訳します

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type='text/javascript'>
      // 后端返回直接执行的方法，相当于执行这个方法，由于后端把返回的数据放在方法的参数里，所以这里能拿到res。
      window.showLocation = function (res) {
        console.log(res)
        //执行ajax回调
      }
    </script>
    <script src='http://api.map.baidu.com/geocoder/v2/?address=上海&callback=showLocation' type='text/javascript'></script>
  </body>
</html>

原因のXMLHttpRequestの制限ではありません、スクリプト、imgタグブラウザ、作られた訪問すること自由に、この時間に対応するバックエンドのコードにapi.map.baidu.comにアクセスするには、この時、バックサーバーへのスクリプトSRCタグhtmlページアドレスパラメータは、二つの側面によれば、つまり、最後の良好なコールバックパラメータを合意した、パッケージされた後にJSONを返します

showLocation({
    status: 0,
    result: {
        location: {
            lng: 121.4219317908279,
            lat: 31.361653367912695
        },
        precise: 1,
        confidence: 80,
        comprehension: 99,
        level: "道路"
    }
})

ブラウザその後、直接対応するshowLocationの実行（）...というように、これは我々が上で定義されwindow.showLocationを行い、我々はJSONはそれを返す必要が通過した道の等価ではない、上のAJAXの成功で、その後私たちの方法戻り値のこのタイプ、およびノークロスドメインを取得することができ、それは非常に微妙ではありません。

HEARTS

CORSは、W3C標準である「クロスオリジンリソースの共有」（クロスオリジンリソース共有）の略で詳細なクロスドメイン・リソースの共有をCORS。ブラウザの制限のうち、「クラック」のための遊びのこの種の、亀裂が実際にブラウザがリリースに頭部の一部を認識していることを言った意味、あなたが反応して、いくつかの頭以上に設定する必要があります。http

--control-アクセスを許可原産地：*はそれがすべての原点（HTMLページのパスブラウザ）アクセスではなく、相同起源を表示できることを示し
-controlリクエスト・アクセス方法、：*ブラウザがトリガを送信するためそれは、アクセスするすべてのHTTPリクエストヘッダを可能に示しては、プリフライトを通じて前に一度、実際のデータを送信する前に、このようなオプションを検出するために、いくつかのシナリオプリフライトリクエストされています送信またはポスト実際のデータ要求を取得し、この時間は、私たちには、いくつかの例をトリガー、対応するメソッドへのアクセスを許可するようにCORS設定を実行する必要があります
1：リクエストメソッドはGET / HEAD / POSTのではありません
2：Content-TypeのPOSTリクエストないアプリケーション/ X-WWW-フォーム- URLエンコード、マルチパート/フォームデータ、またはテキスト/プレーン
3：要求等、カスタム・ヘッダ・フィールドを設定します
--control-許可アクセスヘッダ：配置されているすべてのヘッダは上記構成要求メソッドオプションユニコム検出を使用して、許可されてもよい*は、シーン内で定義された下部ヘッダから要求することができます
--controlアクセス資格情報を許可：このパラメータをTRUEにクロスドメインクッキーの配信をtrueに設定する必要が使用して、フロントエンド構成する必要が使用するときに必要な場合にのみAJAX xhrField：{withCredential：真}クッキーを通過するときに、別のサファリの最新バージョンChromeブラウザの設定は、それ以外の場合は、任意の元のドメインになることができ、アクセス制御-許可-起源は*に設定することができない場合は、このパラメータがtrueに設定されている場合、私のコースをスパイクを参照してください、対応する限度以内に放出する必要がありますあなたはクッキーを渡すことができます、あなたは私が何を渡し、フロントエンドの起点フィールドを調整することができます

あなたはnginxのプロキシを逆に使用している場合は、nginxのリバースプロキシ上で直接設定することができます

location /{
    proxy_pass http://backendserver;

    add_header Access-Control-Allow-Methods *;
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Origin $http_origin;
    add_header Access-Control-Allow-Headers *;

}

代理

異なるソースの限界を破ることは、私はちょうどそれがすることができ、例えば、私の静的なページにある相同性せhttp://a.com/index.html動的なAJAXリクエストへのアクセスがあるhttp://b.com/api/ ***

私は、プロキシによってバックにぶら下がっていた静的および動的なサービスで、サーバーLANサービス、そしてドメイン名nginxのリバースプロキシとしての共通入場c.comドメイン名を使用し、異なるマシン上で展開、対応するサービスを必要とします、設定を変更

server{
    listen:80;
    server_name: c.com;

    #静态资源
    location /{
        proxy_pass http://localhost:8080/;
    }

    #ajax动态请求
    location /api{
        proxy_pass http://localhost:8081/;

    }

}

これは、相同になります

最後に書かれました

まず：親指を見て、作者のご認識いただきありがとうございます。
...
第二：前方の手、より多くの人々が学ぶことができるように、知識を共有します。
...
第三：ポイントの懸念を覚えて、毎日更新！！！
...