什么是跨域

首先一個(gè)url是由協(xié)議,域名,端口三部分組成的.
當(dāng)一個(gè)請求url的協(xié)議,域名,端口三者之一的任意一個(gè)與當(dāng)前頁面的url不同即為跨域

跨域

跨域產(chǎn)生的原因

出于瀏覽器的同源策略限制.
同源策略(Same Orgin Policy)是一種約定,它是瀏覽器核心也是最基本的安全功能,它會(huì)阻止一個(gè)域的js腳本和另外一個(gè)域的內(nèi)容進(jìn)行交互,如果缺少了同源策略,瀏覽器很容易受到XSS,CSRF等攻擊.所謂同源(即在同一個(gè)域)就是兩個(gè)頁面具有相同的協(xié)議(protocol),主機(jī)(host),與端口號(port).

非同源會(huì)出現(xiàn)的限制

1.無法讀取非同源網(wǎng)頁的cookie,localstorage等
2.無法接觸非同源網(wǎng)頁的DOM和js對象
3.無法向非同源地址發(fā)送Ajax請求

解決辦法

1.nginx反向代理解決跨域(把跨域改造成同域)

正向代理
a-->b訪問不了，可以找個(gè)中間的服務(wù)器c, 先訪問c再從c到b,類似曲線救國。
明確訪問的目的地，但是用戶不知道中間的代理服務(wù)器。（忽略中間服務(wù)器）
反向代理a--> c <--b
a明確訪問c代理服務(wù)器，但是不知道c的內(nèi)容從哪里來，c反向從別的地方拿來數(shù)據(jù)。(忽略的是目標(biāo)地址)
瀏覽器可以訪問a,而服務(wù)器之間不存在跨域問題，瀏覽器先訪問a的服務(wù)器c，讓c服務(wù)器作為代理去訪問b服務(wù)器,拿到之后再返回?cái)?shù)據(jù)給a。
例如:
nginx是靜態(tài)服務(wù)器，跨域請求放在api下面好管理http://www.baidu.com:80/api/user,可以在nginx下面的config下面的nginx.conf里面配置,從80端口進(jìn)來的就攔截一下，代理到81端口

server{
    location /api {
        //攔截一下
        proxy_pass  http://www.baidu.com:81;
    }
}

2.添加響應(yīng)頭解決跨域

瀏覽器先詢問b,b允許a訪問
access-control-allow-origin
access-control-max-age
服務(wù)端修改header：

header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式

3.通過jsonp解決跨域

實(shí)現(xiàn)原理：通常為了減輕web服務(wù)器的負(fù)載，我們把js、css、圖片等靜態(tài)資源分離到另一臺獨(dú)立域名的服務(wù)器上，在html頁面中再通過相應(yīng)的標(biāo)簽從不同域名下加載靜態(tài)資源，而被瀏覽器允許。
html中有的標(biāo)簽天然支持跨域，比如<script src="http://www.baidu.com"></script>但是只支持get請求。

iframe跨域

H5提供了postMessage()方法,可以在父子頁面進(jìn)行通信