Ajax資料之同源政策

◆ Ajax請求限制:

Ajax只能向自己的服務器發送請求。比如現在有一個A網站、有一個B網站,A網站中的 HTML文件只能向A網站服務器中發送Ajax請求,B網站中的HTML文件只能向B網站中發送Ajax請求,但是A網站是不能向 B 網站發送 Ajax請求的,同理,B網站也不能向A網站發送Ajax請求。

◆ 同源的概念:

如果兩個頁面擁有相同的協議、域名和端口,那麼這兩個頁面就屬於同一個源,其中只要有一個不相同,就是不同源。

http://www.example.com/dir/page.html:原網址

http://www.example.com/dir2/other.html:同源
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(端口不同)
https://www.example.com/dir/page.html:不同源(協議不同)
◆ 同源政策的目的:

同源政策是爲了保證用戶信息的安全,防止惡意的網站竊取數據。最初的同源政策是指 A 網站在客戶端設置的 Cookie,B網站是不能訪問的。

隨着互聯網的發展,同源政策也越來越嚴格,在不同源的情況下,其中有一項規定就是無法向非同源地址發送Ajax 請求,如果請求,瀏覽器就會報錯。

◆ 使用JSONP解決同源限制問題:

jsonp 是 json with padding 的縮寫,它不屬於 Ajax 請求,但它可以模擬 Ajax 請求。

1、將不同源的服務器端請求地址寫在 script 標籤的 src 屬性中

 <script src="www.example.com"></script>

2、服務器端響應數據必須是一個函數的調用,真正要發送給客戶端的數據需要作爲函數調用的參數。

const data = 'fn({name: "張三", age: "20"})';
res.send(data);

3、在客戶端全局作用域下定義函數 fn

function fn (data) { }

4、在 fn 函數內部對服務器端返回的數據進行處理

function fn (data) { console.log(data); }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章