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常用的基本命令
man命令:查看帮助信息 格式:man 需要查看的命令 date命令:显示时间 格式:# date ...
- IT应届生如何准备找工作？
今天和一个弟弟吃饭,他明年年初即将计算机研究生毕业.谈论到怎么找工作,觉得自己会的不多,心里非常发虚.虽然我当年找工作也走了很多弯路,思路并不是很清晰.但是工作了这么多年,对企业需要什么样子的人还是有 ...
- JQuery上传文件插件Uploadify使用笔记
新工作的第一份任务就是给实现 限制Uploadify 上传文件格式为图片 测试出来报错,选择了非图片文件,提示错误后,再选择其他文件,上传时还是包含了之前清空的非图片文件 最后实现效果的代码是 //上 ...
- ORA-00911: 无效字符
思路:遇到这样问题首先第一步:将有误sql粘至数据库运行一下,如果报错,说明sql存在问题. 第二步:数据库没问题.那么就要想你的书写方式是否正确,是否是ibatasi里的写法,或许是多了个 : 或 ...
- Android Studio 常用快捷键及如何沿用Eclipse的快捷键
1.显示最近编辑的文件列表 Ctrl + E 2.快速打开类 Ctrl + N 3.快速打开文件(可以是XML等各种格式后缀的文件) Ctrl + Shift + N 4.当前方法的声明 Alt + ...
- 开源分布式实时计算引擎 Iveely Computing 之 WordCount 详解(3)
WordCount是很多分布式计算中,最常用的例子,例如Hadoop.Storm,Iveely Computing也不例外.明白了WordCount在Iveely Computing上的运行原理,就很 ...
- Ibatis学习总结7--SqlMapClient 执行 SQL 语句
SqlMapCient 类提供了执行所有 mapped statement 的 API.这些方法如下: public int insert(String statementName, Object p ...
- java操作word
一个使用Apache POI写word文档的实例: 1 package apache.poi; 2 3 import java.io.ByteArrayInputStream; 4 import ja ...
- Oracle创建表格报ORA-00906:缺失左括号错误解决办法
来源于:http://www.linuxidc.com/Linux/2013-06/85297.htm 解决办法: create table myTable(id number(5,2),name v ...
- codevs1227 方格取数2 注意数组啊啊啊啊啊啊啊啊啊啊
一开始T了一组RE了一组,实在找不出错来,就把数组加了一个0竟然就多A了一组.很惊讶的又加了几个0最后竟然全A了!!! 懒得做了,改的是之前的那个蚯蚓的游戏问题.还是需要拆点,至于为什么不能重复走结点 ...