什么是跨域
首先一个url是由协议,域名,端口三部分组成的.
当一个请求url的协议,域名,端口三者之一的任意一个与当前页面的url不同即为跨域
跨域
跨域产生的原因
出于浏览器的同源策略限制.
同源策略(Same Orgin Policy)是一种约定,它是浏览器核心也是最基本的安全功能,它会阻止一个域的js脚本和另外一个域的内容进行交互,如果缺少了同源策略,浏览器很容易受到XSS,CSRF等攻击.所谓同源(即在同一个域)就是两个页面具有相同的协议(protocol),主机(host),与端口号(port).
非同源会出现的限制
1.无法读取非同源网页的cookie,localstorage等
2.无法接触非同源网页的DOM和js对象
3.无法向非同源地址发送Ajax请求
解决办法
1.nginx反向代理解决跨域(把跨域改造成同域)
正向代理
a-->b访问不了，可以找个中间的服务器c, 先访问c再从c到b,类似曲线救国。
明确访问的目的地，但是用户不知道中间的代理服务器。（忽略中间服务器）
反向代理a--> c <--b
a明确访问c代理服务器，但是不知道c的内容从哪里来，c反向从别的地方拿来数据。(忽略的是目标地址)
浏览器可以访问a,而服务器之间不存在跨域问题，浏览器先访问a的服务器c，让c服务器作为代理去访问b服务器,拿到之后再返回数据给a。
例如:
nginx是静态服务器，跨域请求放在api下面好管理http://www.baidu.com:80/api/user,可以在nginx下面的config下面的nginx.conf里面配置,从80端口进来的就拦截一下，代理到81端口
server{
location /api {
//拦截一下
proxy_pass http://www.baidu.com:81;
}
}
2.添加响应头解决跨域
浏览器先询问b,b允许a访问
access-control-allow-origin
access-control-max-age
服务端修改header：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
3.通过jsonp解决跨域
实现原理：通常为了减轻web服务器的负载，我们把js、css、图片等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许。
html中有的标签天然支持跨域，比如<script src="http://www.baidu.com"></script>但是只支持get请求。
iframe跨域
H5提供了postMessage()方法,可以在父子页面进行通信
网友评论