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 相关文章推荐
javascript的console.log()用法小结
May 31 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
js实现异步循环实现代码
Feb 16 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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比你想象的好得多
2014/11/27 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
详解VUE前端按钮权限控制
2019/04/26 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
服装创业计划书范文
2014/02/05 职场文书
煤矿安全协议书
2014/08/20 职场文书
作风建设年活动总结
2014/08/27 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
python实现简易名片管理系统
2021/04/11 Python