前端跨域請求及解決方案

2022-03-23 16:13:29 字數 4175 閱讀 9449

跨域請求是當前發起請求的域(協議、網域名稱、埠)與該請求指向的資源所在的域不一致,常見的解決方式有 jsonp、跨域資源共享cors、反向**等

1、jsonp

2、跨域資源共享cors(cross-origin resource sharing)

3、反向**(最常用)

在前端開發編碼過程中,常見的html標籤例如:**a**、**form**、**mg**、**script**、**ink**、**iframe**以及ajax操作都可以指向乙個資源位址或者說可以發起對乙個資源的請求跨域請求:當前發起請求的域與該請求指向的資源所在的域不一致(這裡所有的域是協議、網域名稱和埠號的合集,同域就是所協議、網域名稱和埠號均相同,任何乙個不同都是跨域)。同源策略是用來防禦來自非法的攻擊,但我們不能因為防禦非法的攻擊就將所有的跨域都攔截掉。a、呼叫第三方介面:在現代前端開發中,我們經常需要呼叫第三方的服務介面(例如 mock server、fake api),隨著專業化分工的出現有很多專業的資訊服務提供商為前端開發者提供各類介面,這種情況下就需要進行跨域請求(這類前端介面服務很多是採用的cors方式來解決跨域問題的,下文會詳細介紹)。

b、前後端分離專案:還有一類情況是在前後端分離的專案中,前端後端分屬於不同的服務跨域問題在採用這種架構的時候就存在。而且現在很多專案都採用這種前後分離的方式,這類專案很多是會採用反向**的方式來解決跨域問題。1、jsonp

2、跨域資源共享cors(cross-origin resource sharing)

3、反向**a、jsonp(json with padding)是json的一種使用模式,可用於解決主流瀏覽器的跨域資料訪問問題,在早兩三年前端解決跨域問題中經常出現這類解決方案。

b、jsonp的原理就是,ajax存在跨域安全問題,但是script標籤是不存在這類問題的。php端拼接js函式呼叫:php通過引數獲取**函式的名字,然後函式名和要返回的資料一起拼接成函式呼叫1、【新增的一組http首部字段允許伺服器其宣告哪些**請求有許可權訪問哪些資源】:cors是乙個新的w3c標準,它新增的一組http首部字段允許伺服器其宣告哪些**請求有許可權訪問哪些資源,換言之它允許瀏覽器向其宣告了cors的站進行跨域請求。

2、【在響應的http首部增加access-control-allow-origin等資訊】:這種方式最主要的特點就是會在響應的http首部增加access-control-allow-origin等資訊,從而判定哪些資源站可以進行跨域請求,還有幾個其他相關的http首部進行更加精細化的控制,最主要的還是access-control-allow-origin。cors這種跨域方式最主要的特點就是會在響應的http首部增加access-control-allow-origin等資訊,從而判定哪些資源站可以進行跨域請求,還有幾個其他相關的http首部進行更加精細化的控制,最主要的還是access-control-allow-origin。*、jsonp只支援get方式侷限性很多,而且jsonp並不符合處理業務的正常流程。

*、採用cors的方式,前端編碼與正常非跨域請求沒有什麼不同。在目前很多的fake api(模擬介面服務)、mock server(資料模擬服務)以及其他公共服務上都很多採用cors的方式來解決跨域問題,例如json-server等。-、【不跨域,**請求】:既然不能跨域請求,那麼我們不跨域就可以了。通過在請求到達服務前部署乙個服務,將介面請求進行**,這就是反向**。通過一定的**規則可以將前端的請求**到其他的服務。

-、【反向**統一前後端】:通過反向**我們將前端後端專案統一通過反向**來提供對外的服務,這樣在前端看上去就跟不存在跨域一樣。

-、【前後端分離專案主流】:反向**麻煩之處就在原對nginx等反向**服務的配置,在目前前後端分離的專案中很多都是採用這種方式。cors和反向**是目前使用最多的解決方案,這兩個解決方案使用的場景並不相同,我們要根據自身的需求進行選擇。公共服務、fake apl、mock server一般採用cors的方案;而公司前後端分離的專案中更多是採用反向**的方案。·在前端開發編碼過程中,常見的html標籤例如:**a**、**form**、**mg**、**script**、**ink**、**iframe**以及ajax操作都可以指向乙個資源位址或者說可以發起對乙個資源的請求,那麼這裡所說的請求就存在同域請求還是跨域請求。

·所謂跨域請求就是指:當前發起請求的域與該請求指向的資源所在的域不一致(這裡所有的域是協議、網域名稱和埠號的合集,同域就是所協議、網域名稱和埠號均相同,任何乙個不同都是跨域)。

既然同源策略是瀏覽器的核心基礎安全策略,那為什麼我們在進行前端開發特別是aiax呼叫時還要進行跨域請求呢?同源策略是用來防禦來自非法的攻擊,但我們不能因為防禦非法的攻擊就將所有的跨域都攔截掉。

在現代前端開發中,我們經常需要呼叫第三方的服務介面(例如 mock server、fake api),隨著專業化分工的出現有很多專業的資訊服務提供商為前端開發者提供各類介面,這種情況下就需要進行跨域請求(這類前端介面服務很多是採用的cors方式來解決跨域問題的,下文會詳細介紹)。

還有一類情況是在前後端分離的專案中,前端後端分屬於不同的服務跨域問題在採用這種架構的時候就存在。而且現在很多專案都採用這種前後分離的方式,這類專案很多是會採用反向**的方式來解決跨域問題。

·修改瀏覽器的安全設定(不推薦)

·jsonp

·跨域資源共享cors(cross-origin resource sharing)

·iframe(不推薦)

·反向**

jsonp(json with padding)是json的一種使用模式,可用於解決主流瀏覽器的跨域資料訪問問題,在早兩三年前端解決跨域問題中經常出現這類解決方案。

jsonp的原理就是,ajax存在跨域安全問題但是script標籤是不存在這類問題的,於是乎就有人根據這個特性做文章找解決方案。

跨域資源共享cors(cross-origin resource sharing)

·cors是乙個新的w3c標準,它新增的一組http首部字段允許伺服器其宣告哪些**請求有許可權訪問哪些資源,換言之它允許瀏覽器向其宣告了cors的站進行跨域請求。

·這種方式最主要的特點就是會在響應的http首部增加access-control-allow-origin等資訊,從而判定哪些資源站可以進行跨域請求,還有幾個其他相關的http首部進行更加精細化的控制,最主要的還是access-control-allow-origin。具體每個首部資訊的含義可以去搜尋詳細了解下。

·cors與jsonp對比來說優勢比較明顯,jsonp只支援get方式侷限性很多,而且jsonp並不符合處理業務的正常流程。採用cors的方式,前端編碼與正常非跨域請求沒有什麼不同。在目前很多的fake api(模擬介面服務)、mock server(資料模擬服務)以及其他公共服務上都很多採用cors的方式來解決跨域問題,例如json-server等。

·既然不能跨域請求,那麼我們不跨域就可以了。通過在請求到達服務前部署乙個服務,將介面請求進行**,這就是反向**。通過一定的**規則可以將前端的請求**到其他的服務。以nginx為例:

·通過反向**我們將前端後端專案統一通過反向**來提供對外的服務,這樣在前端看上去就跟不存在跨域一樣。

·反向**麻煩之處就在原對nginx等反向**服務的配置,在目前前後端分離的專案中很多都是採用這種方式。

·綜上所述,cors和反向**是目前使用最多的解決方案,這兩個解決方案使用的場景並不相同,我們要根據自身的需求進行選擇。公共服務、fake apl、mock server一般採用cors的方案;而公司前後端分離的專案中更多是採用反向**的方案。

前端跨域解決方案

跨域是指乙個域下的文件或指令碼試圖去請求另乙個域下的資源,這裡跨域是廣義的。其實我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的一類請求場景。什麼是同源策略?同源策略 sop same origin policy 是一種約定,由netscape公司1995年引入瀏覽器,它是瀏覽器最核心也最基本的...

跨域請求解決方案

1.什麼叫js跨域請求 js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向乙個不同的域請求資料,或者通過js獲取頁面中不同域的框架中 iframe 的資料。什麼是不同的域 只要協議 網域名稱 埠有任何乙個不同,都被當作是不同的域。2.下面貼上一段請求 這用的是angularjs編...

跨域請求解決方案

在前端開發過程中,難免和服務端產生資料互動。一般情況我們的請求分為這麼幾種情況 只關注傳送,不關注接收 不僅要傳送,還要關注服務端返回的資訊 上面提到了乙個概念,我們這裡簡單做一下講解。什麼叫做跨域?一般情況下,跨域分為三種情況 跨協議 跨子域 跨網域名稱。下面距離梳理一下這三種情況。我們需要知道的...