解決ajax跨域的方法原理詳解之Cors方法

一、神馬是跨域（Cross Domain）

 

對於端口和協議的不一樣，只能經過後臺來解決。

 

一句話：同一個ip、同一個網絡協議、同一個端口，三者都知足就是同一個域，不然就是

跨域問題了。而爲何開發者最初不直接定爲一切可跨域的呢？默認的爲何都是不可跨域呢？這就涉及到了同源策

略，爲了系統的安全，由Netscape提出一個著名的安全策略。如今全部支持JavaScript的瀏覽器都會使用這個策略。

所謂同源是，域名，協議，端口相同。當咱們在瀏覽器中打開百度和谷歌兩個網站時，百度瀏覽器在執行一個腳本的

時候會檢查這個腳本屬於哪一個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行，若是沒有同源策略，那

隨便的向百度中注入一個js腳本，彈個惡意廣告，經過js竊取信息，這就很不安全了。

 

說白點就是post、get的url不是你當前的網站，域名不一樣。例如在aaa.com/a.html裏面，表單的提交action是bbb.com/b.html。

不只如此，www.aaa.com和aaa.com之間也屬於跨域，由於www.aaa.com是二級域名，aaa.com是根域名。

JavaScript出於安全方面的考慮，是不容許跨域調用其餘頁面的對象的（同源策略 Same-Origin Policy）。

 

關於JavaScript可否跨域通訊的詳細說明，見下表：

http://www.a.com/a.js訪問如下URL的結果

URL	說明	是否容許通訊
http://www.a.com/b.js	同一域名下	容許
http://www.a.com/script/b.js	同一域名下不一樣文件夾	容許
http://www.a.com:8000/b.js	同一域名，不一樣端口	不容許
https://www.a.com/b.js	同一域名，不一樣協議	不容許
http://70.32.92.74/b.js	域名和域名對應ip	不容許
http://script.a.com/b.js	主域相同，子域不一樣	不容許
http://a.com/b.js	同一域名，不一樣二級域名（同上）	不容許
http://www.b.com/b.js	不一樣域名	不容許

 

二、爲嘛要跨域

基於兩個方面：

a. web應用自己是部署在不一樣的服務器上

b.基於開發的角度 --- 先後端分離

web應用自己是部署在不一樣的服務器上，對應的域名也就有所不一樣

好比百度。

主域名：https://www.baidu.com/

二級域名：http://image.baidu.com/， http://music.baidu.com/，http://wenku.baidu.com/ 

須要在不一樣的域之間，經過ajax方式互相請求，是很是常見的需求。

基於開發的角度

如今提倡的先後端分離開發。

前端負責寫html、css、js代碼，須要向後臺要數據，渲染到頁面。

後臺負責寫業務邏輯，向前臺提供數據。

後臺提供的數據，做爲前端如何才能拿到呢？

這就須要先後端進行協做。

後臺，只負責提供API，就是一個ulr，好比，

http://m.maizuo.com/v4/api/billboard/home?__t=1489757848973

前臺，須要經過ajax發起請求，去獲取數據。

在開發的時候，後臺的代碼部署在一個服務器上。前端的代碼部署在另一個服務器上。

前臺在向後臺經過ajax去請求數據的時候，就涉及到跨域。

就好比,咱們的後臺已經開發好了一個功能，獲取當前首頁面的輪播圖中的電影數據，給前臺提供的url以下：

http://m.maizuo.com/v4/api/billboard/home?__t=1489757848973

我是前端開發人員，須要獲取該數據，而後渲染到頁面上。

此時，必需要使用ajax方式。

 

三、腫麼跨域

關於跨域，有多達七八種方案。

其中有以下三種方案，是須要重點關注：

a. Cors

b. Jsonp（重點）

c.代理

Cors

本意：cross origin resource share，跨資源共享

場景：服務端的代碼在個人控制範圍以內，換言之，後臺提供的api代碼，我是有權限去操做的。只須要在服務端編寫代碼，瀏覽器端不用寫任何代碼。

 

這種方式最簡單，只須要在服務端設置幾個頭信息便可。

在node中，設置以下：

res.setHeader('Access-Control-Allow-Origin', "*"); //針對哪一個域名能夠訪問，*表示全部

res.setHeader('Access-Control-Allow-Credentials', true); //是否能夠攜帶cookie

res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');

 

 今天先給你們提供最簡單的一種跨域方法，後續再爲你們介紹更多及更重要的方法！