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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
Vue3 Composition API的使用简介
Mar 29 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
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
angular 服务随记小结
2019/05/06 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
python抓取百度首页的方法
2015/05/19 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
python计算n的阶乘的方法代码
2019/10/25 Python
Python单元测试与测试用例简析
2019/11/09 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Django values()和value_list()的使用
2020/03/31 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
高三毕业寄语
2014/04/10 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书