suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der domänenübergreifenden JS-POST-Implementierungsschritte

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

php中世界最好的语言
php中世界最好的语言Original
2018-05-12 11:18:132328Durchsuche

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("'"+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', 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.

<!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 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!

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：Detaillierte Erläuterung der Schritte zum Implementieren von Baumansichtsdaten in VueNächster Artikel：Detaillierte Erläuterung der Schritte zum Implementieren von Baumansichtsdaten in Vue

In Verbindung stehende Artikel

Mehr sehen