JavaScript 跨域之POST实现方法


Posted in Javascript onMay 07, 2018

javascript 跨域是一个很常见的问题,其中 jsonp 是一个最常用的手段,但是 jsonp 只支持 get,不支持 post,所以如果想通过 jsonp 来 post 一些数据,就头大了。

此处通过在一个 iframe 中生成 form 表单的形式来实现 post,并通过 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("'"+k+"':'"+Request.Form[k]+"'");
      }

      
      sbRet.Append("});");
      sbRet.Append("</script>");

      Response.Write(sbRet.ToString());
      Response.End();
    }

比如说你想返回给我的是    { userName:'user1', password:'pass1' }  , 当我调用 http://localhost/test?jsoncallback=callme 的时候

你实际返回 <script>callme({ userName:'user1', password:'pass1' })</script> 即可。

第二步,本地文件夹内构建post测试页面,如 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>

第三步,浏览一下并点击提交,看看返回的如果是 <script>callme({ userName:'user1', password:'pass1' })</script>则说明后端程序没有问题了。

第四步,我们写段通用的代码来实现上面的 html.

<!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="'+k+'" value="'+data[k]+'" />'
    }
      template = template 
      + '<input type="text" name="jsoncallback" value="function callback(data) { parent.postMessage(data, \'*\'); } callback" />'
      + '</form>'
      + '<'+'script>'
      + 'document.getElementById("form1").submit();'
      + '</'+'script>';      
   template = template.replace("{{url}}", url);      
   var div = document.createElement("div");
   div.style.display = 'none';  
   div.innerHTML = '<iframe src=""></iframe>';
   document.body.appendChild(div);   
   var ifrm = div.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>

第五步、安全问题、

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS面向对象编程之对象使用分析
Aug 19 Javascript
javascript object array方法使用详解
Dec 03 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
js代码实现轮播图
May 04 Javascript
ES6关于Promise的用法详解
May 07 #Javascript
React Form组件的实现封装杂谈
May 07 #Javascript
vue如何将v-for中的表格导出来
May 07 #Javascript
浅谈Vue 数据响应式原理
May 07 #Javascript
浅谈Vue响应式(数组变异方法)
May 07 #Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 #Javascript
详解JavaScript的BUG和错误
May 07 #Javascript
You might like
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
JavaScript的parseInt 进制问题
2009/05/07 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
JS实现网站吸顶条
2020/01/08 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
使用索引有什么好处
2016/07/27 面试题
一些Unix笔试题和面试题
2012/09/25 面试题
往来会计岗位职责
2013/12/19 职场文书
商场消防管理制度
2014/01/12 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
SQL Server中使用表变量和临时表
2022/05/20 SQL Server