小結(jié);

1、跨域是因?yàn)檎?qǐng)求資源的服務(wù)器和資源服務(wù)器的協(xié)議，域名和端口不同，為了不跨域，就要讓他們處在同一個(gè)域。如果是協(xié)議和端口不同，前端沒法處理跨域。

2、常用的方法有一、JSONP（利用src沒有跨域限制，傳一個(gè)函數(shù)名作為參數(shù)到后臺(tái)，后臺(tái)拼接函數(shù)名和數(shù)據(jù)返回前端，然后自動(dòng)調(diào)用前端的函數(shù)。缺點(diǎn)就是只能用get方法，限制多，不安全）

? ? ? ?二、CORS（跨域資源共享，就是在后臺(tái)響應(yīng)頭中設(shè)置Access-Control-Allow-Origin允許指定的域訪問，缺點(diǎn)是不安全）

? ? ? ?三、nginx（讓請(qǐng)求和被請(qǐng)求的服務(wù)器處在同一個(gè)域下）

? 3、跨域雖然存在，但是請(qǐng)求依然發(fā)出并且返回，只不過是被瀏覽器攔截了。

由于src屬性的值可以是任意的URL，因此來自一個(gè)Web服務(wù)器的JavaScript程序或Web頁面可以使用由另一個(gè)Web服務(wù)器輸出的代碼。

所謂同源是指"協(xié)議+域名+端口"三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址，也非同源。

不同源的客戶端腳本在沒有明確授權(quán)下不能讀取對(duì)方的資源。所以a.com下的js腳本采用ajax讀取b.com里面的文件數(shù)據(jù)是會(huì)報(bào)錯(cuò)的。

如果要進(jìn)行跨域請(qǐng)求，可以使用html的script標(biāo)簽來進(jìn)行跨域請(qǐng)求，并在響應(yīng)中返回要執(zhí)行的script代碼，其中可以直接使用json傳遞js對(duì)象，這種跨域的通訊方式稱為jsonp。

特別說明：

一：如果是協(xié)議和端口造成的跨域問題“前臺(tái)”是無能為力的。

跨域并不是請(qǐng)求發(fā)不出去，請(qǐng)求能發(fā)出去，服務(wù)端能收到請(qǐng)求并正常返回結(jié)果，只是結(jié)果被瀏覽器攔截了。你可能會(huì)疑問明明通過表單的方式可以發(fā)起跨域請(qǐng)求，為什么?Ajax?就不會(huì)?

因?yàn)闅w根結(jié)底，跨域是為了阻止用戶讀取到另一個(gè)域名下的內(nèi)容，Ajax?可以獲取響應(yīng)，瀏覽器認(rèn)為這不安全，所以攔截了響應(yīng)。但是表單并不會(huì)獲取新的內(nèi)容，所以可以發(fā)起跨域請(qǐng)求。同時(shí)也說明了跨域并不能完全阻止?CSRF，因?yàn)檎?qǐng)求畢竟是發(fā)出去了。

1.當(dāng)用戶發(fā)送localhost:80/時(shí)會(huì)被nginx轉(zhuǎn)發(fā)到http://localhost:81服務(wù)；

2.當(dāng)界面請(qǐng)求接口數(shù)據(jù)時(shí)，只要以/apis?為開頭，就會(huì)被nginx轉(zhuǎn)發(fā)到后端接口服務(wù)器上；

總結(jié)：nginx實(shí)現(xiàn)跨域的原理，實(shí)際就是把web項(xiàng)目和后端接口項(xiàng)目放到一個(gè)域中，這樣就不存在跨域問題，然后根據(jù)請(qǐng)求地址去請(qǐng)求不同服務(wù)器（真正干活的服務(wù)器）；

CORS?全稱是跨域資源共享（Cross-Origin?Resource?Sharing），是一種?ajax?跨域請(qǐng)求資源的方式

當(dāng)你使用?XMLHttpRequest?發(fā)送請(qǐng)求時(shí)，瀏覽器發(fā)現(xiàn)該請(qǐng)求不符合同源策略，會(huì)給該請(qǐng)求加一個(gè)請(qǐng)求頭：Origin，后臺(tái)進(jìn)行一系列處理，如果確定接受請(qǐng)求則在返回結(jié)果中加入一個(gè)響應(yīng)頭：Access-Control-Allow-Origin;?瀏覽器判斷該相應(yīng)頭中是否包含?Origin?的值，如果有則瀏覽器會(huì)處理響應(yīng)，我們就可以拿到響應(yīng)數(shù)據(jù)后臺(tái)進(jìn)行一系列處理，如果確定接受請(qǐng)求則在返回結(jié)果中加入一個(gè)響應(yīng)頭：Access-Control-Allow-Origin;?瀏覽器判斷該相應(yīng)頭中是否包含?Origin?的值，如果有則瀏覽器會(huì)處理響應(yīng)，我們就可以拿到響應(yīng)數(shù)據(jù)。

#?直接請(qǐng)求nginx也是會(huì)報(bào)跨域錯(cuò)誤的這里設(shè)置允許跨域

#?如果代理地址已經(jīng)允許跨域則不需要這些,?否則報(bào)錯(cuò)(雖然這樣nginx跨域就沒意義了)

add_header?Access-Control-Allow-Origin?*;

可以參考鏈接：

【跨域?-?饑人谷_fanison?-?簡書】http://www.itdecent.cn/p/1a22e1aa0e49

【什么是跨域？如何解決？?-?仰望星空得少年?-?簡書】http://www.itdecent.cn/p/8fa2acd103ea