1.跨域是什么意思?
首先一个url是由:协定、域名、端口 三局部组成。(个别端口默认80)
如:https://blog.moonlet.cn:80
当一个申请url的协定
、域名
、端口
三者之间的任意一个
与以后页面url不同
即为跨域
。
例如:
以后页面url | 被申请页面url | 是否跨域 | 起因 | |||
---|---|---|---|---|---|---|
http://www.testlocation.com/ | http://www.testlocation.com/i... | 否 | 同源(协定、域名、端口号雷同) | |||
http://www.testlocation.com/ | https://www.testlocation.com/... | 跨域 | 协定不同(http/https) | |||
http://www.testlocation.com/ | http://www.baidu.com/ | 跨域 | 主域名不同(test/baidu) | |||
http://www.testlocation.com/ | http://blog.testlocation.com/ | 跨域 | 子域名不同(www/blog) | |||
http://www.testlocation.com:8... | http://www.testlocation.com:7... | 跨域 | 端口号不同(8080/7001) |
————————————————
2.跨域产生起因?
出于浏览器的同源策略
限度。
同源策略(Same Orgin Policy)是一种约定,它是浏览器外围也最根本的平安性能,它会阻止一个域的js脚本和另外一个域的内容进行交互,如果短少了同源策略,浏览器很容易受到XSS、CSFR等攻打。 所谓同源(即在同一个域)就是两个页面具备雷同的协定(protocol)、主机(host)和端口号(port)。
非同源会呈现的限度
无奈读取非同源网页的cookie、localstorage等无奈接触非同源网页的DOM和js对象无奈向非同源地址发送Ajax申请
3.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; }}
4.增加响应头解决跨域
浏览器先询问b,b容许a拜访
access-control-allow-origin
access-control-max-age
PHP端批改header:
header('Access-Control-Allow-Origin:*');//容许所有起源拜访header('Access-Control-Allow-Method:POST,GET');//容许拜访的形式
5.通过jsonp解决跨域(老办法)
实现原理:
通常为了加重web服务器的负载,咱们把js、css、图片等动态资源拆散到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载动态资源,而被浏览器容许。
html中有的标签人造反对跨域,比方<script src="http://www.baidu.com"></script>然而只反对get申请。