前端跨域方式和原理

jsonp跨域

jsonp是一种跨域通信的手段，它的原理其实很简单：

利用

由于使用script标签的src属性，因此只支持get方法

function jsonp(req){
// 动态创建script标签
var script = document.createElement(‘script’);
var url = req.url + ‘?callback=’ + req.callback.name;
script.src = url;
document.getElementsByTagName(‘head’)[0].appendChild(script);
}

// 调用
jsonp({
url : ‘’,
callback : hello
});

当然，jquery也支持jsonp的实现方式:

$.ajax({
url:‘http://www.xxx.com’,
type:‘GET’,
dataType:‘jsonp’,// 请求方式为jsonp
jsonpCallback:‘callback’,
data:{
“username”:“xxx”
}
})

document.domain + iframe 跨域

两个域名必须属于同一个主域名！而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域。

什么是主域名相同呢？

www.baidu.com（百度官网）
map.baidu.com（百度地图）
tieba.baidu.com（百度贴吧）
news.baidu.com（百度新闻）
image.baidu.com（百度图片）
这五个主域名都是baidu.com

.

举个例子，现在有两个页面：

news.baidu.com(news.html)
map.baidu.com(map.html)
news.baidu.com里的一个网页（news.html）引入了map.baidu.com里的一个网页（map.html）

这时news.html里同样是不能操作map.html里面的内容的。
因为document.domain不一样，一个是news.baidu.com，另一个是map.baidu.com。
这时我们就可以通过Javascript，将两个页面的domain改成一样的，
需要在a.html里与b.html里都加入：

document.domain = “baidu.com”;

这样这两个页面就可以互相操作了。也就是实现了同一一级域名之间的"跨域"。

具体代码：

• 我是map.baidu.com中的ul

postMessage跨域

在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document Messaging）
Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage

postMessage可以解决：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递
postMessage(data,origin)方法接受两个参数：

data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
.

举个栗子
a.html (www.baidu.com/a.html)

b.html (www.qq.com/b.html)

CORS 跨域资源共享

是目前主流的跨域解决方案

CORS 跨域资源共享传送门

node代理跨域

跨域行为是浏览器禁止的，但是服务端并不禁止。使用proxyTable的原理就是将域名发送给本地的node服务器，再由本地的服务器去请求真正的服务器。

以vue为例

config/index.js文件中

proxyTable: {
‘/api’: {
// 测试环境
target: ‘http://baidu.com’, // 接口域名 要代理的url
changeOrigin: true, //是否跨域
pathRewrite: {
‘^/api’: ‘’
}
}

配置完必须要重启node服务才会生效！！！