Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Schritte zur domänenübergreifenden Implementierung von POST mithilfe von JS

Detaillierte Erläuterung der Schritte zur domänenübergreifenden Implementierung von POST mithilfe von JS

php中世界最好的语言Original: 2018-05-31 10:26:151356Durchsuche

Dieses Mal werde ich Ihnen die Schritte der JS-domänenübergreifenden POST-Methode ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die JS-domänenübergreifende POST-Methode? Das Folgende ist ein praktischer Fall sehen.

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("'"+k+"':'"+Request.Form[k]+"'");
      }
      
      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

<form action="http://localhost/test" method="post">
　　<input type="text" name="userName" value="user1" />
　　<input type="text" name="password" value="pass1" />
  <input type="text" name="jsoncallback" value="callme" />
  <input type="submit" value="提交" />
</form>

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', passwort:'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.

<!doctype html>
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试一哈</title>
  </head>  
  <body>   
  <script>
  //源码 开始
   function postJSONP(url, data, callback) {
    var template = '<form action="{{url}}" method="post" id="form1">';   
    for (var k in data) {
     template = template
       + ' 　<input type="text" name="&#39;+k+&#39;" value="&#39;+data[k]+&#39;" />'
    }
      template = template 
      + '　　<input type="text" name="jsoncallback" value="function callback(data) { parent.postMessage(data, \&#39;*\&#39;); } callback" />'
      + '</form>'
      + '<&#39;+&#39;script>'
      + 'document.getElementById("form1").submit();'
      + '</&#39;+&#39;script>';      
   template = template.replace("{{url}}", url);      
   var p = document.createElement("p");
   p.style.display = 'none';  
   p.innerHTML = '<iframe src=""></iframe>';
   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('http://localhost:59898/WebForm1.aspx', { userName: '张静', password: '就不告诉你' }, function(data) {
    console.log(11, data);
   });
   postJSONP('http://localhost:59898/WebForm1.aspx', { 仓库: '1号大仓', 面积: '2万平米' }, function(data) {
    console.log(22, data);
   });
  }
 </script>
  </body>
</html>

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 beherrscht haben, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!

Empfohlene Lektüre:

Wie man Vue verwendet, um Baumansichtsdaten zu implementieren

Welche Methoden kann JS implementieren? DOM-Baumdurchquerung?

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Node.JS führt eine Schleife durch, um alle Dateien in nicht leeren Ordnern und Unterverzeichnissen zu löschenNächster Artikel：Node.JS führt eine Schleife durch, um alle Dateien in nicht leeren Ordnern und Unterverzeichnissen zu löschen

In Verbindung stehende Artikel

Mehr sehen