什么是跨域?跨域解决方法
参考文章
一、为什么会出现跨域问题
出于浏览器的同源策略限制。
- 同源策略(
Sameoriginpolicy
)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。- 可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
- 同源策略会阻止一个域的
javasScript
脚本和另外一个域的内容进行交互。- 所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
二、什么是跨域
当一个请求url
的协议、域名、端口三者之间任意一个与当前页面url
不同即为跨域
当前页面url |
被请求页面url |
是否跨域 | 原因 |
---|---|---|---|
http://www.test.com/ | http://www.test.com/index.html | 否 | 同源(协议、域名、端口号相同) |
http://www.test.com/ | https://www.test.com/index.html | 跨域 | 协议不同(http/https ) |
http://www.test.com/ | http://www.baidu.com/ | 跨域 | 主域名不同(test/baidu ) |
http://www.test.com/ | http://blog.test.com/ | 跨域 | 子域名不同(www/blog ) |
http://www.test.com:8080/ | http://www.test.com:7001/ | 跨域 | 端口号不同(8080/7001 ) |
三、非同源限制
- 无法读取非同源网页的
Cookie
、LocalStorage
和IndexedDB
- 无法接触非同源网页的
DOM
- 无法向非同源地址发送
AJAX
请求
四、跨域解决方法
1、设置document.domain
解决无法读取非同源网页的 Cookie问题
因为浏览器是通过document.domain
属性来检查两个页面是否同源,因此只要通过设置相同的document.domain
,两个页面就可以共享Cookie
(此方案仅限主域相同,子域不同的跨域应用场景。)
// 两个页面都设置
document.domain = 'test.com';
2、跨文档通信 API:window.postMessage()
调用postMessage
方法实现父窗口http://test1.com
向子窗口http://test2.com
发消息(子窗口同样可以通过该方法发送消息给父窗口)
它可用于解决以下方面的问题:
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的
iframe
消息传递 - 上面三个场景的跨域数据传递
// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');
// 父窗口向子窗口发消息(第一个参数代表发送的内容,第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');
调用message事件,监听对方发送的消息
// 监听 message 消息
window.addEventListener('message', function (e) {
console.log(e.source); // e.source 发送消息的窗口
console.log(e.origin); // e.origin 消息发向的网址
console.log(e.data); // e.data 发送的消息
},false);
3、JSONP
JSONP
是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post
请求。
核心思想:网页通过添加一个<script>
元素,向服务器请求 JSON
数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。
1.原生实现:
<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,用来指定回调函数的名字
// 处理服务器返回回调函数的数据
<script type="text/javascript">
function dosomething(res){
// 处理获得的数据
console.log(res.data)
}
</script>
2. jQuery ajax
:
$.ajax({
url: 'http://www.test.com:8080/login',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "handleCallback",