前端跨域POST数据
前言
咱们说的跨域POST提交解决方案,注意这里是POST提交数据,比如表单提交,所以这时候别跟我说SCRIPT标签实现JSONP什么的。 想要实现POST提交数据无非2种:
- 1、是服务端允许你跨域。
- 2、其实就是想办法和需要跨的域名下的页面通信。
conan
1、跨域资源共享
- 可以去google搜索一下 “cors”,这个很简单,这里不做讨论,基本都是服务器配置一下即可。补充一个地址把:http://www.html5rocks.com/en/tutorials/cors/
- 缺点是部分浏览器不支持
2、postMessage跨域
- 这个也不做讨论,同理去搜索一下postMessage就可以得到答案了。
- 缺点也是部分浏览器不支持
3、iframe跨域POST提交数据
需求:
页面a.html在域名a.com下需要提交到域名b.com下
思路:
思路是在a.html里面提交form表单到一个iframe上
让iframe去post你要发送的数据。
等结果出来以后,再重定向(location)到a.com域名下的c.html下,且带上query包含着回调的结果.
这时候iframe里面的内容就是c.html,而它是a.com域名的页面,和a.html是同域,就可以调用parent的方法了。
简而言之,通过iframe来POST提交数据,通过query来get回调结果.
a.html
<iframe src="" frameborder="0" id="ts"></iframe>
<form action="http://127.0.0.1/Dropbox/code/test/b.php" target="ts" method="post" >
<input type="text"><br/>
<input type="password" name="id"></br>
<input type="submit" value="提交" name="ps">
</form>
<script>
callback = function(data){
window.console && window.console.log(data) === undefined || alert(data);
}
</script>
b.php
//do some things;
// ... ...judge user of password
///////
//我这里本地测试修改了host
header('location: http://zhangnan.baidu.com/Dropbox/code/test/c.html?user='.$_POST['id'] .'&password='. $_POST['ps']);
c.html
<script>
top.callback && top.callback(location.search);
</script>
相关文章
- webpack相关知识
能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-
- Javascript基础和ES6
HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in
- JavaScript编码规则
JavaScript编码规则 目的:改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量,污染全局环境。 常量 基本类型number、string、boolean是常量值。对
- JavaScript获取和设置CSS属性
获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意: 只能获取属
- javascript作用域、上下文、this和闭包详解
词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级:在{}之内是一个块级作用域(ES6之前没有块级作用于只有函数内的局部作用
随机推荐
- webpack相关知识
能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-
- Javascript基础和ES6
HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in
- JavaScript编码规则
JavaScript编码规则 目的:改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量,污染全局环境。 常量 基本类型number、string、boolean是常量值。对
- JavaScript获取和设置CSS属性
获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意: 只能获取属
- javascript作用域、上下文、this和闭包详解
词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级:在{}之内是一个块级作用域(ES6之前没有块级作用于只有函数内的局部作用