客戶端向伺服器端傳送響應,需要保證協議、網域名稱和埠號相同,否則會出現跨域問題,而相同的協議、網域名稱和埠號就叫同源,否則就是跨域。
保證使用者資訊保安
1、jsonp
原理
:使用jsonp可以繞過同源政策
要求
:前後端需要配合
使用步驟
1、將請求位址寫在script的src屬性中,因為src屬性可以繞過同源政策,但是要求返回的必須是js**。
2、所以要求服務端響應資料必須是乙個函式的呼叫,而客戶端需要的資料則作為函式的引數傳遞。
3、為了可以讓函式可以在客戶端進行呼叫,所以我們需要在客戶端進行函式的定義。
4、在客戶端所定義的函式的內部進行資料的處理。
客戶端**
>
function
fn(data)
script
>
src=
''>
script
>
js服務端**
get(
'/ajax'
,function
(req, res)
)'// 4、傳遞響應
res.
send
(response)})
執行結果
2、cors
原理
:使用cors使得伺服器可以支援跨域請求
1、瀏覽器在傳送請求時,會將請求頭(origin)傳送給伺服器,裡面有協議、網域名稱和埠號等資訊。
2、伺服器會根據這個資訊發回乙個響應頭(access-control-allow-origin),裡面有請求頭的資訊或者是*號。
3、瀏覽器根據響應頭提供的白名單,判斷是否支援這次跨域
要求
:只需後端伺服器配置即可
使用步驟
伺服器端需要設定兩項內容。
1、設定哪些客戶端允許訪問伺服器
2、設定客戶端允許使用哪些方法訪問伺服器,如get或post
客戶端**
onclick
="btn"
id='button'
>
傳送請求button
>
>
var btn = document.
getelementbyid
('button'
) btn.
onclick
=function()
}script
>
伺服器端**
get(
'/cors'
,function
(req, res)
)執行結果
在express框架中使用use***為所有請求設定響應頭
use(
function
(req, res, next)
)
ajax跨域以及同源策略
一 同源策略 在不同的url中,如果協議 網域名稱 埠相同,那麼這些url則為同源,如果協議 網域名稱 埠其中有一項不同,與路徑不同無關,則為不同源,不同源的url傳送請求則為跨域請求。在瀏覽器中跨域採用同源策略,除非js的 的 前端框架 css的外部樣式等,可以發現這些不受同源策略的限制可以載入跨...
AJAX 同源與跨域2
跨域是指乙個域下的文件或指令碼試圖去請求另乙個域下的資源,這裡跨域是廣義的。廣義的跨域 2 資源嵌入 2.子視窗 3 window.name iframe window.name屬性的獨特之處 name值在不同的頁面 甚至不同網域名稱 載入後依舊存在,並且可以支援非常長的 name 值 2mb 1....
同源和跨域
同源機制指的是乙個指令碼不可以請求與它不同域下的資源,非同源的請求就是跨域的請求,其實只要協議 網域名稱 埠有乙個不同,就算跨域。這種機制是為了防止出現盜鏈 乙個站點的網頁引用其它 的諸如的資源。或者將銀行網頁掛到自己的網頁上得到假的網銀賬戶頁面,以此竊取賬戶資訊 iframe 但是有很多情況需要跨...