同源和跨域的知識點

2021-09-11 17:32:26 字數 2196 閱讀 3488

1.同源的概念

同源(也叫同源策略),是瀏覽器中的一種安全機制

2.同源的規則

同源指『三個相同』,協議相同,網域名稱相同,埠號相同(簡單來說,就是同乙個**)

埠號不同

網域名稱不同

協議不同

3.同源的目的

是為了保護使用者資訊的安全,防止惡意**竊取資訊

4.同源策略的限制範圍(也就是不同源的情況)

cookie,localstorage,indexdb無法讀取

dom無法獲取

ajax請求不能傳送(並不是說請求不能傳送了,而是在請求的過程中被攔截了)

注意點:同源機制的判斷時機:

傳送ajax請求時,不判斷兩個頁面是否同源(可以傳送請求

瀏覽器也可以接收到後台響應的內容(能接收響應

接收到響應後,瀏覽器才會根據同源策略判斷響應內容的頁面和當前頁面是否是同源的,如果是同源的,請求傳送成功;否則就攔截

實現不同源的**之間可以相互請求資料,但是,瀏覽器是不支援跨域的,所以要解決主流瀏覽器的跨域資料訪問的問題。

1. jsonp(json with padding)

因為img,link,script標籤不受同源策略的影響,所以用它們來解決跨域的問題。

jsonp的原理:

利用script標籤不受同源策略的限制,實現跨域請求。

jsonp 的特點

1.必須使用get請求

2.沒有相容性問題

jsonp傳送跨域請求

html中

(原生傳送jsonp的寫法)

//ajax傳送請求只用於同源**之間

//實際工作中,需要讓不同源的**之間可以互相請求資料,因此,需要跨域

//jsonp

//作用: 解決主流瀏覽器的跨域資料訪問的問題

//原理:利用script標籤不受同源策略的限制,實現跨域請求

//jsonp方式請求資料

function

fun(res)

<

/script>

<

!-- 把函式名上傳給後台,避免了前後臺互動時,函式名不一致導致獲取不到資料的問題 --

>

"/json.php?callback=fun"

>

<

/script>

jquery傳送jsonp請求的寫法(利用了ajax方法)

$.

ajax(}

)

php中

<?php

header

('content-type:text/html;charset=utf-8');

$arr=[

'name'

=>

'zs'

,'age'

=>10]

;$str

=json_encode

($arr);

// 拿到函式名,再把後台的資料作為函式的實參返回出去

// 在php中 ,用 . 來拼接

echo

$_get

['callback'].

"($str)";

?>

2.cors(跨域資源共享)

使用它的前提:(1)瀏覽器支援這個功能(ie10+) (2)伺服器允許跨域

只需要在伺服器上寫

//cors解決跨域 ,只需要在伺服器**中新增以下**

// * 允許所有的網域名稱訪問這個介面

header

('access-control-allow:*');

//只允許www.zs.com這個網域名稱訪問這個介面

// header('access-control-allow:www.zs.com');

cors和jsonp的對比

相同點:都需要後台的配合

不同點:jsonp 必須使用get請求,沒有相容性問題;cors 哪種請求都可以,但是有相容性問題,ie10以上的支援。

總結:1.跨域行為是瀏覽器行為,響應回來了,只是瀏覽器的安全機制限制了

2.伺服器之間不存在跨域

同源和跨域

同源機制指的是乙個指令碼不可以請求與它不同域下的資源,非同源的請求就是跨域的請求,其實只要協議 網域名稱 埠有乙個不同,就算跨域。這種機制是為了防止出現盜鏈 乙個站點的網頁引用其它 的諸如的資源。或者將銀行網頁掛到自己的網頁上得到假的網銀賬戶頁面,以此竊取賬戶資訊 iframe 但是有很多情況需要跨...

同源策略和跨域

url由三部分組成 資源型別 存放資源的主機網域名稱 資源檔名。也可認為由4部分組成 協議 主機 埠 路徑 url的一般語法格式為 帶方括號的為可選項 protocol hostname port path parameters query fragment protocol 協議 指定使用的傳輸協...

Django 跨域和同源

1995年,同源政策由 netscape 公司引入瀏覽器。目前,所有瀏覽器都實行這個政策。同源策略 最初,它的含義是指,a網頁設定的 cookie,b網頁不能開啟,除非這兩個網頁 同源 所謂 同源 指的是 三個相同 網域名稱 協議 埠號相同即為同源,同源政策的目的,是為了保證使用者資訊的安全,防止惡...