「クロスドメイン」のリードからの最終的な思考（JSONP）

1.クロスドメインとは何ですか？

プロトコル、サブドメイン、ドメインマスターは、ポート番号がいずれかと同じでない場合、異なるドメインとしてカウントされたクロスドメインは、サーバが要求を受信するために、要求を発行することができる要求することができないと正常に結果を返しますが、「同一生成元ポリシー」ブラウザがあるため、結果はブラウザのブロックでした。
- 例えば、本AJAXリクエストJSまたはページをJQ場合、要求プロトコルが、ポート番号が任意の1つとして同じ現在のドメイン、サブドメイン、ドメインマスターでない場合、すべてのクロスドメイン、
- 最後に、それは単に：ブラウザはつまり、「同一生成元ポリシー」を、持っている：「同一生成元ポリシー」ブラウザがあるので、ブラウザはドメインのみ現在のAjaxを送信常駐、要求が別のドメインに送信される場合、ブラウザと考えることができますそれがエラーになります。

クロスドメインの二つの方法の2処理

解決策は2つあります：

CORS方法：
- この方法は、クロスドメイン・レスポンス・オブジェクトを受け入れるようにブラウザを強制することができ、応答オブジェクトの応答ヘッダを設けることにより、主な方法であります
```
def api (request) :
   ret : = HttpResponse('百度')
   ret["Access-Control- Allow -Origin"] = "*”  #设置响应对象的响应头,接受任何跨域响应对象
   return ret
```
JSONP：これはアイデアではないクロスドメインの問題に対処するための最良の方法、絶対ブラスト思考
- クロスドメインソリューションに対する1つの解決策は、ブラウザの同一生成元ポリシー、クロスドメイン（動的に作成したスクリプトタグ）をバイパスすることができ、巧妙なメカニズムです。
- 本質の第三部では！

3.究極のアイデアを（最良の部分）

再次声明: jsonp这是一种思想,不是解决跨域的最好办法,只是一个解决跨域的方案，是一种巧妙的机制，可以绕过浏览器的同源策略，实现跨域（动态创建script标签）。但是这个思想是真的牛逼,一起来看

まず、クロスドメインの根本的な原因を考える：「同一生成元ポリシー」ブラウザがありますので、ブラウザだけで、現在の要求が別のドメインに送信される場合、ブラウザがエラーを与えるのAjaxを送っ存在するドメインと考えることができます。
- 元ポリシーは、ブラウザが存在します
- リクエスト・レスポンスオブジェクトをブロック

3.1 JSクロスドメインの例：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 
<script>
        // 同源请求
        function sendMsg1() {
            $.ajax({
                url:'/msg/',//默认端口8000
                type:'GET',
                success:function (arg) {
                    console.log(arg);
                }
            })
        }
        // 跨域请求
        function sendMsg2() {
            $.ajax({
                url:'http://127.0.0.1:9000/api/',
                type:'GET',
                success:function (arg) {
                    console.log(arg);
                }
            })
        }
</script>

クロスドメイン・エラー要求がトリガされます。

ここでの焦点私は応答オブジェクトAJAXリクエストがブロックされたが、あなたが、それに注意を払っていないが、参照jqueryのソースは知らないこれに、<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>有効なままになります！私の神は、jqueryの、クロスドメインAJAXではないでしょうか？また！のでプロトコルは、メインのドメイン名をサブドメイン際、ポート番号は任意の同じではありません、異なるドメインとしてカウントされます！しかし、なぜ私のjqueryのそれを傍受していませんか？

のでsrc！、それに合格「同一生成元ポリシーを」で所有し、同一生成元ポリシーは、要求SRC属性応答オブジェクトをブロックしません。

それはそうですので、私があればという<script>要求URLを書き、私のsrcタグしていますか？物事を行います！

3.2 JSONPバイパス同一生成元ポリシーの例

のでsrc！、それに合格「同一生成元ポリシーを」で所有し、同一生成元ポリシーは、要求SRC属性応答オブジェクトをブロックしません。

// 前端页面

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // 同源请求
        function sendMsg1() {
            $.ajax({
                url:'/msg/',
                type:'GET',
                success:function (arg) {
                    console.log(arg);
                }
            })
        }
        // 依旧跨域
        function sendMsg2() {
            var tag = document.createElement('script'); //创建一个script标签
            tag.src = 'http://127.0.0.1:9000/api/?callback=f1';  //更改src属性
            document.head.appendChild(tag);  // 添加到head中
            document.head.removeChild(tag);  //删除该标签
        }

        function f1(arg) {   // 请求响应完毕后,要执行的函数
            console.log(arg);
        }

    </script>

# 目标域的api接口
def api(request):
    func_name = request.GET.get('callback')
    return HttpResponse('%s("百度")' %func_name)  # 灵活接受前端的参数,并将该参数和数据一起返回

コールは〜スクリプトタグを作成し、src属性を変更する、オールインワンで、完璧なクロスドメイン、ラベルを削除し、先頭に追加しました！

作成しscriptたラベルを、SRCを変更します。

在跨域请求出发时,创建一个script标签,并将src的值赋值为要请求的url,并动态设置参数callback=f1,f1是为了返回对象后执行定义的f1函数,出发自定义的动作

カスタムスクリプトタグが先頭に追加されます

    将自定义的script标签添加到head中后,script标签就会根据url请求一个js文件,并按照javascript的方式执行,也就是去url请求一个响应对象,也就是 f1("百度"),你是不是想到了什么?没错,如果在此时你定义了
  function f1(arg) {   
      console.log(arg);
   }
这么一个函数,这个函数就会被执行,那么跨域的问题不就解决了,也就是可以任你摆布了

ラベルを削除します。

在head添加了script标签,得到f1("百度")后f1函数会立即执行,防止多次请求head中script标签过多,删了就行!

私たちは完了です。

しかし、それは唯一の要求を取得しJSONP作られ、

概要


        浏览器的"同源策略"不会拦截src的请求响应,通过该机制就可以绕过浏览器的同源策略.

        再重复一次:jsonp一个解决跨域的方案，是一种巧妙的机制，可以绕过浏览器的同源策略，实现跨域（动态创建script标签）.这是一种思想一种机制.