JS 크로스 도메인 POST 구현 단계에 대한 자세한 설명

이번에는 JS 크로스 도메인 POST 구현 단계에 대해 자세히 설명하겠습니다. JS 크로스 도메인 POST 구현 시 주의사항은 무엇인가요?

javascript Cross-domain은 매우 흔한 문제이며 그 중 jsonp가 가장 많이 사용되는 방법이지만 jsonp는 post가 아닌 get만 지원하므로 일부 데이터를 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', 비밀번호:'pass1' } 입니다.

실제로 <script>callme({ userName:'user1', 비밀번호:'pass1' })</script>를 반환할 수 있습니다.

두 번째 단계, d:test.html

　　 　　      

와 같은 로컬 폴더에 게시 테스트 페이지를 구축합니다. 3단계, 찾아보고 제출을 클릭하여 반환된 항목이 <script>callme({ userName:' user1'인지 확인합니다. , 비밀번호:'pass1' })</script>는 백엔드 프로그램에 문제가 없음을 의미합니다.

네 번째 단계에서는 위의 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>
  

다섯 번째 단계, 보안 문제,

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. PHP 중국어 웹사이트의 기타 관련 기사를 주목해주세요!

추천 도서:

react-navigation 사용법 요약(코드 포함)

JS DOM 요소의 일반적인 추가, 삭제, 수정 및 확인 작업에 대한 자세한 설명

위 내용은 JS 크로스 도메인 POST 구현 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!