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


1、神馬是跨域(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 不同域名 不允許

 

2、為嘛要跨域

基於兩個方面:

a. web應用本身是部署在不同的服務器上

b.基於開發的角度 --- 前后端分離

web應用本身是部署在不同的服務器上,對應的域名也就有所不同

比如百度。

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

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

需要在不同的域之間,通過ajax方式互相請求,是非常常見的需求。

基於開發的角度

現在提倡的前后端分離開發。

前端負責寫htmlcssjs代碼,需要向后台要數據,渲染到頁面。

后台負責寫業務邏輯,向前台提供數據。

后台提供的數據,作為前端如何才能拿到呢?

這就需要前后端進行協作

后台,只負責提供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方式。

 

3、腫么跨域

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

其中有如下三種方案,是需要重點關注:

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');

 

 今天先給大家提供最簡單的一種跨域方法,后續再為大家介紹更多及更重要的方法!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM