关于前端:什么是跨域-出现原因及解决方法

1.跨域是什么意思？

首先一个url是由：协定、域名、端口 三局部组成。（个别端口默认80）
如：https://blog.moonlet.cn:80

当一个申请url的协定、域名、端口三者之间的任意一个与以后页面url不同即为跨域。
例如:

————————————————

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申请。