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判断文本框内容改变事件的简单实例
Mar 07 Javascript
javascript时间函数大全
Jun 30 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
JS实现百度搜索框
Feb 25 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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
phpBB BBcode处理的漏洞
2006/10/09 PHP
也谈php网站在线人数统计
2008/04/09 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
js获得参数的getParameter使用示例
2014/02/26 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python集合类型用法分析
2015/04/08 Python
Python3实现购物车功能
2018/04/18 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
python实现人机猜拳小游戏
2020/02/03 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
个人廉洁自律承诺书
2014/03/27 职场文书
文明工地标语
2014/06/16 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS