Detaillierte Erläuterung der Schritte zur domänenübergreifenden Implementierung von POST mithilfe von JS-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-05-31 10:26:15

Original

1368 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Der fünfte Schritt, Sicherheitsprobleme,

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

Nach dem Login kopieren

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!