写在前面的：
为什么需要跨域:同源策略(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跨域的js原生写法
jsonp的核心法则是动态添加：下面是使用jquery的ajax封装好的jsonp:
使用JSONP的示例
5、最官方实用的跨域： 后端设置cors实现跨域。
简单说就是在后端返回的Response Headers里设置一个允许访问的请求源。
在NodeJS中可以这样：
使用cors跨域对请求头的设置
在其他语言的后端也是类似的。
其中，Access-Control-Allow-Origin就是我们需要设置的域名，Access-Control-Allow-Methods是允许的请求方式，Access-Control-Allow-Headers跨域允许包含的头。
6、To be continue......
网友评论