Detaillierte Erläuterung der domänenübergreifenden JS-POST-Implementierungsschritte

Dieses Mal werde ich Ihnen die Schritte zur Implementierung von JS-domänenübergreifendem POST ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die JS-domänenübergreifende POST-Implementierung? .

Javascript Cross-Domain ist ein sehr häufiges Problem, wobei JSONP die am häufigsten verwendete Methode ist, aber JSONP unterstützt nur Get, nicht Post, also wenn Sie einige Daten über posten möchten jsonp, der Kopf ist groß.

Post wird hier implementiert, indem ein Formular in einem Iframe generiert wird und der Wert über postMessage an den Anrufer zurückgegeben wird.

Im ersten Schritt implementieren wir zunächst einen Backend-Code, der JSONP akzeptiert. Welche Sprache für die Implementierung verwendet wird, entscheiden Sie selbst.

Der C#-Code lautet:

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();
    }

Was Sie mir beispielsweise zurückgeben möchten, ist { Benutzername:'Benutzer1', Passwort:'Pass1' } , wenn ich http:// aufrufe localhost/test Wenn ?jsoncallback=callme

Sie tatsächlich <script>callme({ userName:'user1', password:'pass1' })</script> zurückgeben.

Der zweite Schritt besteht darin, eine Post-Test-Seite im lokalen Ordner zu erstellen, z. B. d:test.html

　　 　　      

Der dritte Schritt besteht darin, zu suchen und auf „Senden“ zu klicken, um zu sehen, ob der zurückgegebene Wert vorliegt ist <script>callme({ userName:'user1', password:'pass1' })</script> bedeutet, dass es kein Problem mit dem Back-End-Programm gibt.

Im vierten Schritt schreiben wir einen allgemeinen Code, um das obige HTML zu implementieren.

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>
  

Der fünfte Schritt, Sicherheitsprobleme,

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

Ich glaube, Sie haben den Fall gelesen Dieser Artikel Nachdem Sie die Methode gemeistert haben, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!

Empfohlene Lektüre:

React-Navigation-Nutzungszusammenfassung (mit Code)

Allgemeines Hinzufügen, Löschen, Ändern und Abfragen Operationen von JS-DOM-Elementen Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der domänenübergreifenden JS-POST-Implementierungsschritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!