JS クロスドメイン POST 実装手順の詳細な説明

今回は、JS クロスドメイン POST の実装手順について詳しく説明します。JS クロスドメイン POST 実装の注意事項 は何ですか?実際のケースを見てみましょう。

javascript クロスドメインは非常に一般的な問題であり、その中でも jsonp が最も一般的に使用されるメソッドですが、jsonp は get のみをサポートし、post はサポートしないため、jsonp 経由でデータを投稿したい場合は、大きな問題が発生します。 。

Post は、iframe 内にフォームを生成することでここで実装され、postMessage を通じて呼び出し元に値を返します。

最初のステップでは、まず jsonp を受け入れるバックエンド コードを実装します。実装に使用する言語については、自分で決定します。

C# コードは次のとおりです:

protected void Page_Load(object sender, EventArgs e)
    {
      StringBuilder sbRet = new StringBuilder();
      sbRet.Append("<script>");
      sbRet.Append(Request["jsoncallback"]);
      sbRet.Append("({");
      foreach (string k in Request.Form) {
        if (k == "jsoncallback") continue;
        sbRet.Append("&#39;"+k+"&#39;:&#39;"+Request.Form[k]+"&#39;");
      }
      
      sbRet.Append("});");
      sbRet.Append("</script>");
      Response.Write(sbRet.ToString());
      Response.End();
    }

たとえば、 http://localhost/test?jsoncallback=callme

を呼び出したときに、私に返したいのは { userName:'user1', password:'pass1' } です。

実際には <script>callme({ userName:'user1', password:'pass1' })</script> を返すことができます。

2 番目のステップ、d:test.html などの投稿テスト ページをローカル フォルダーに構築します

　　 　　      

ステップ 3、参照して送信をクリックし、返された内容が <script>callme({ userName:' user1' であるかどうかを確認します) 、password:'pass1' })</script> は、バックエンド プログラムに問題がないことを意味します。

4 番目のステップでは、上記の HTML を実装するための一般的なコードを作成します。

nbsp;html>

  
   <meta>
    <title>测试一哈</title>
    
     
  <script>
  //源码 开始
   function postJSONP(url, data, callback) {
    var template = &#39;<form action="{{url}}" method="post" id="form1">&#39;;   
    for (var k in data) {
     template = template
       + &#39; 　<input type="text" name="&#39;+k+&#39;" value="&#39;+data[k]+&#39;" />&#39;
    }
      template = template 
      + &#39;　　<input type="text" name="jsoncallback" value="function callback(data) { parent.postMessage(data, \&#39;*\&#39;); } callback" />&#39;
      + &#39;&#39;
      + &#39;<&#39;+&#39;script>&#39;
      + &#39;document.getElementById("form1").submit();&#39;
      + &#39;</&#39;+&#39;script>&#39;;      
   template = template.replace("{{url}}", url);      
   var p = document.createElement("p");
   p.style.display = &#39;none&#39;;  
   p.innerHTML = &#39;<iframe src="">&#39;;
   document.body.appendChild(p);   
   var ifrm = p.children[0];
   var cwin = ifrm.contentWindow;
   cwin.document.write(template);   
   window.onmessage = function(e) {
   if (callback) callback(e.data);
   }
   }
   //源码 结束  
  //使用测试
   window.onload = function() {
   postJSONP(&#39;http://localhost:59898/WebForm1.aspx&#39;, { userName: &#39;张静&#39;, password: &#39;就不告诉你&#39; }, function(data) {
    console.log(11, data);
   });
   postJSONP(&#39;http://localhost:59898/WebForm1.aspx&#39;, { 仓库: &#39;1号大仓&#39;, 面积: &#39;2万平米&#39; }, function(data) {
    console.log(22, data);
   });
  }
 </script>
  

5 番目のステップでは、セキュリティの問題です。

window.onmessage = function(e) {
  //可通过 e 来判断来源，并做一些安全方面的处理，此处读者自己去研究吧，可以加个 console.log(e) 看看 e 有哪些内容。
  if (callback) callback(e.data);
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 php 中国語ウェブサイト その他の関連記事にご注意ください。

推奨読書:

React-navigationの使用法の概要(コード付き)

JS DOM要素の一般的な追加、削除、変更、チェック操作の詳細な説明

以上がJS クロスドメイン POST 実装手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。