ajax同源政策和跨域請求方式詳解

2021-10-23 16:34:34 字數 1759 閱讀 6797

客戶端向伺服器端傳送響應,需要保證協議、網域名稱和埠號相同,否則會出現跨域問題,而相同的協議、網域名稱和埠號就叫同源,否則就是跨域。

保證使用者資訊保安

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 但是有很多情況需要跨...