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 相关文章推荐
jquery 回车事件实现代码
Aug 23 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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实现数组按指定KEY排序的方法
2015/03/30 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
Django  ORM 练习题及答案
2019/07/19 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
小摄影师教学反思
2014/04/27 职场文书
2015年路政工作总结
2015/05/22 职场文书
中秋晚会致辞
2015/07/31 职场文书
2016寒假假期总结
2015/10/10 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android