写在前面的:
为什么需要跨域:同源策略(Same-Origin Policy)。所谓同源是指,域名,协议,端口相同。
不同源(域名、协议、端口只要有一个不同)的客户端脚本(JavaScript)在没明确授权的情况下,不能读写对方的资源。
1、关于只在chrome浏览器端设置的跨域:
在chrome的桌面快捷图标上右键——>属性——>快键方式一栏。在目标一栏的输入框里后面追加下面加粗斜体的一串字符串,注意和前面部分有空格。其中C:\MyChromeDevUserData需要在c盘新建一个空的这个文件夹。然后重启chrome浏览器。只有从桌面快捷方式打开的才有效。
"D:\Program Files\googlechrome_dev\chrome.exe" --args --disable-web-security --user-data-dir=C:\MyChromeDevUserData,--user-data-dir
如果看到:
2、post跨域上传文件的iframe解决方案:jsp页面方式。
首先,在window对象下定义一个方法,参数为后端传过来的数据。
然后,在待提交的表单里要添加一个隐藏的input ,设置name为'callback', value值为上面window下定义的那个方法名。
然后,在body里动态添加一个隐藏的iframe页面,在这个iframe页面里通过js设置它的document.domain为父域。
代码为:var str = location.hostname;
document.domain = str.substring(str.indexOf(".") + 1);
然后再这这个iframe里调用父页面定义的那个在window下的方法。可以是通过jsp页面后端传过来的参数:parent["${param.callback}"]( ${res} );其中${res}为后端传过来的前端所需要的参数。
3、普通的ajax也可以通过iframe来实现跨域请求数据:待补充。
实现原来大体和上面差不多。也是让后端返回一个页面把数据填写到js里面,然后前端通过一个iframe去加载这个页面。
document.domain + iframe (只有在主域相同的时候才能使用该方法);
但是缺点是性能比较低。
4、Jsonp方式实现跨域请求:script标签不受同源限制
JSONP包含两部分:动态构造一个script标签添加到页面和一个接受数据的回调函数。
jsonp只支持get的请求方式,因为它只能通过script标签的src传入参数。所以不支持文件上传,安全性比较弱,所传的参数量也比较少。
利用元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的javascript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
使用原生方式来写jsonp:
jsonp的核心法则是动态添加:下面是使用jquery的ajax封装好的jsonp:
5、最官方实用的跨域: 后端设置cors实现跨域。
简单说就是在后端返回的Response Headers里设置一个允许访问的请求源。
在NodeJS中可以这样:
在其他语言的后端也是类似的。
其中,Access-Control-Allow-Origin就是我们需要设置的域名,Access-Control-Allow-Methods是允许的请求方式,Access-Control-Allow-Headers跨域允许包含的头。
6、To be continue......