web前端跨域方案
ajax跨域请求 qzfl实现
跨子域的xhr
- 原生xhr不支持跨域，通过iframe+proxy.html达到跨子域
- 假如A页面要请求B页面，A、B跨子域。A创建指向B的proxy页的iframe，将目的url、回调方法挂在iframe属性上，proxy通过frameElement获取目的url发送xhr请求后回调由A页面设置在iframe上的回调方法达到代理请求的目的。
跨全域的get请求jsonp
- jsonp可以跨全域，但只支持get方式。利用的是script标签没有域名限制的特性
跨全域的post请求formSend
- 通过构造带form表单的iframe，并将回调方法挂在iframe，提交form产生post请求，调用frameElement.callback回调。需要cgi返回符合协议格式
<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /></head>
<body><script type="text/javascript"> document.domain="qq.com"; frameElement.callback({JSON:"Data"}); </script></body>
</html>
下载源码：qzfl_2.1.27.js
xhr2.0
HTML5的XMLHttpRequest 2.0 在旧浏览器支持的XMLHttpRequest对象升级后，且向前兼容。
如何判断是否支持XHR 2.0?
网页端
new XMLHttpRequest().withCredentials==="undefined" 有withCredentials属性则支持XMLHttpRequest 2.0。
如果是使用jquery，ajax参数要设置下
$.ajaxSetup({
// dataType: 'json',
xhrFields: {withCredentials: true}
});
服务器端
例如PHP：header('Access-Control-Allow-Origin: http://someotherdomain.com');
withCredentials 默认为false，不会发送目标域名的cookie。手动设为true后，且服务器Access-Control-Allow-Credentials设置为true时，则可发送和接受到目标域名的cookie。
header('Access-Control-Allow-Origin: http://qgroup.qq.com');
header("Access-Control-Allow-Credentials: true");
XHR2.0的新特性?
1.可发送跨域(子域)请求,在请求头中携带Origin属性，这个属性由浏览器生成无法修改。用来给服务器判断来源是否合法。
2.XHR的新接口api在保持向前兼容的同时，更简洁实用。
XMLHttpRequest(.upload)--onload、onerror、onabort、onprogress =fn 上传请求和返回响应阶段都可以定义回调方法,特别是onprogress是完全新增的功能
xhr.upload.onprogress=function(e){
e.loaded/e.total
}
3.支持二进制数据,xhr.send(ArrayBuffer/Bolb)
跨域通信
postMessage+navigator方式
iframe跨域通信在高级浏览器上可以通过html5 postMessage接口实现，在ie6、7下可以通过navigator共享来解决。
postMessage通信
A主页面要跟B iframe嵌入页面通信
A.js:
document.getElementById("B").contentWindow.postMessage(data,domain);
B.js:
B.addEventListener("message",callbackB,true);
B iframe页面要跟A主页面通信
B.js:
window.top.postMessage(data,domain);
A.js:
window.addEventListener("message",callbackA,true);
window.name方式
实现跨域主动拉取页面数据，页面数据应该是无状态的静态数据。
事例：A页面存有一个UI组件的dom、js、css，B页面非同域情况下要获取A的ui组件信息我们通常会用<script>方式，但这一script里要包含html和css格式会很难看，通过A页面将UI数据存在window.name中，B页面创建 iframe先请求A页面获取window.name值后跳转到about:blank页，因为每个域名下都有个about:blank页面，这样B就能取得window.name，间接与A通信成功了。
但这种业务场景比较特殊，适用不广泛。参考链接：http://www.cnblogs.com/rubylouvre/archive/2012/07/30/2614904.html
web前端跨域方案的更多相关文章
- IIS反向代理解决Web前端跨域
1.1 IIS7反向代理解决跨域问题IIS的版本必须是IIS7及其以上,否则没有反向代理功能:按照以下步骤来配置IIS,以实现反向代理: 1.2 配置步骤1. 下载安装ARR(Application ...
- 前端跨域方案-跨域请求代理（node服务）
前端开发人员在本地搭建node服务,调用接口首先走本地服务,然后转发到api站点,node服务代码如下: var express = require('express'), request = req ...
- 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...
- 前端总结·基础篇·JS（四）异步请求及跨域方案
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 跨域调用webapi web端跨域调用webapi
web端跨域调用webapi 在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...
- Web CORS 跨域方式使用方式
CORS 参考 http://enable-cors.org/index.html https://help.aliyun.com/document_detail/oss/practice/cors_ ...
- 前端跨域（二）：JSONP
上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...
- JAVA解决前端跨域问题。
什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
随机推荐
- 熟悉linux开发环境（实验）
北京电子科技学院(BESTI) 实验报告 课程: 深入理解计算机系统 班级: 1353班 姓名:张若嘉 杨舒雯 学号:20135330 20135324 成绩: 指导教师:娄嘉鹏 实验日期:2015. ...
- 【WEB前端经验之谈】时间一年半,或沉淀、或从零开始。
距上次写博客还是有点久了,中间有个写的念头,不过由于不知道写什么也就放弃了. 14年4月份第一份前端工作到现在也有一年半之久了,自己对前端的热爱相对于一年前是有过之而无不及.一年半的时间里自己也成长了 ...
- EF实体框架之CodeFirst八
前面七篇基本把Code First学习了一下,不过code first中会出现一个问题,就是数据迁移的问题. 一.数据准备 还是在前面的demo上修改,这次使用Province和City类. publ ...
- iOS 自定义控件开发（中）
<iOS 自定义控件开发(上)> <iOS 自定义控件开发(中)> 接上篇iOS自定义控件开发之后,我们尝试另外一种. 在Xcode的右边,会看到如下的图 其中,上面有一个:C ...
- AutoMapper用法（转载）
申明 本文转载自http://www.qeefee.com/article/automapper 作者:齐飞 配置AutoMapper映射规则 AutoMapper是基于约定的,因此在实用映射之前,我 ...
- Orchard基本概念
本文链接:http://www.cnblogs.com/souther/p/4531273.html Orchard是个CMS(这不是废话么),它的首要目标是帮助你从现有的碎片建设网站.这些碎片大小不 ...
- Object C学习笔记18-SEL,@ selector,Class,@class
本章是对上一章<<Object C学习笔记17-动态判断和选择器>>的一点补充,所以比较简单点. 一. SEL 类型 在上一篇介绍了几个方法,都只是介绍了其使用方式但是没有具体 ...
- [设计模式] Javascript 之 外观模式
外观模式说明 说明:外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口; 外观模式是我们经常使用遇到的模式,我们经常涉及到的功能,可能需要涉及到 ...
- [设计模式] javascript 之 代理模式
代理模式说明 说明:顾名思义就是用一个类来代替另一个类来执行方法功能,这个模式跟装饰模式有点相似,不一样的是,代理模式是代替客户初始化被代理对象类,而装饰模式采用接口或初装饰者参数引用的方式来执行的. ...
- 团队作业 -- beta版本
下一阶段需要改进完善的功能 1界面布局 2方块颜色调整 下一阶段新增的功能 1分数排行榜 2撤销上一步操作 需要改进的团队分工 无. 按要求加上一起进行编码任务 需要改进的工具流程 使用github进 ...