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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 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提取中文首字母
2008/04/09 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
python range()函数取反序遍历sequence的方法
2018/06/25 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
机电一体化大学生求职信
2013/11/08 职场文书
给领导的检讨书
2014/02/16 职场文书
建材投资建议书
2014/05/16 职场文书
文秘自荐信
2014/06/28 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
西游降魔篇观后感
2015/06/15 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS