![a88bc7f117742b06b14d547549c899cb.png](https://i-blog.csdnimg.cn/blog_migrate/39080b9991d65d74c71d3507f4d9a53a.jpeg)
一、什么是跨域?
在了解什么是跨域的时候,我们首先要了解一个概念,叫同源策略,什么是同源策略呢,就是我我们的浏览器出于安全考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。
是什么意思呢,就比如你刚刚登录了淘宝买了东西,但是你现在又点进去了另外一个网站,那么你现在的淘宝账户是属于登录状态,而并没有登出,所以你现在点进去的这个网站可以看到你的账户信息,并操作你的账户信息,这样子就很危险。
我们在来了解一个概念,就是本域,什么是本域呢?就是同协议,同域名,同端口就叫本域。
![434e1ce9dcf24046d21cd6e436f78c48.png](https://i-blog.csdnimg.cn/blog_migrate/fd0988995a15de1842d641f4f8dbf0a6.jpeg)
从这个图片我们可以清楚的了解到,什么是本域,以及什么时候跨域。
浏览器请求的三种报错:
1、请求未发送
2、请求发送后,服务器发现不一样,服务器未反应。
3、请求发送,服务器有反应,数据返回的时候,浏览器发现不对,被拦截。
二、跨域的解决方法
那如果非要实现跨域,我们应该怎么办呢?
1、JSONP (JSON with padding)
就是与后端协商好,在请求数据返回数据的时候以字符串的格式返回。
script src = 'xxx.com' callback = showDate
function showDate (ret) {
console.log(ret)
}
这个时候就跨域了,JSONP 可以在IE10以下的浏览器去获取数据。
2、CORS (跨资源共享)
在响应头里面写上
res.setHeader(' Access - Contorl - Allow - Origin' ,'http://localhost:8080')
只要响应头里面的Origin里面本域(协议、域名、端口)一样,就可以接受到数据
3、降域和PostMessage
3.1 降域
document.domain = 'xxx.com'
需要本域中的域名和端口一样
3.2 PostMessage
window.frames[0],PostMessage(this,value)
window.addEventListener('message',function(e)){} //调用message,监听对方发送的消息