面試被問到的同源策略和跨域問題之解決方案

2021-10-10 04:22:58 字數 3113 閱讀 3964

知識點

同源策略

跨域jsonp

cors(服務端支援)

document.domain

window.name

window.postmessage方法

iframe加form

** nginx配置

同源策略

同源:協議,網域名稱,埠,三者必須一致

ajax 請求時,瀏覽器要求當前網頁和server必須同源(安全)

同源策略限制了從同乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的重要安全機制。

跨域跨域,指的是從乙個網域名稱去請求另外乙個網域名稱的資源。即跨網域名稱請求!跨域時,瀏覽器不能執行其他網域名稱**的指令碼,是由瀏覽器的同源策略造成的,是瀏覽器施加的安全限制。

跨域的嚴格一點來說就是只要協議,網域名稱,埠有任何乙個的不同,就被當作是跨域。

載入 css js 可無視同源策略

那麼為什麼可以無視呢?

瀏覽器這樣做,都是有一定的考慮的,都是為了有一些功能,比如說:

**講解:

前端通過

no.2 cors

cors是乙個w3c標準,全稱是"跨域資源共享"(cross-origin resource sharing),當乙個請求url的協議,網域名稱,埠三者之間任意與當前頁面位址不同即為跨域.它允許瀏覽器向跨源伺服器傳送xmlhttprequest請求,從而克服ajax只能同源使用的限制.

原理: 伺服器對於cors的支援,主要就是通過設定access-control-allow-origin來進行的。如果瀏覽器檢測到相應的設定,就可以允許ajax進行跨域的訪問。

瀏覽器將cors請求分為兩類:簡單請求和非簡單請求

只要滿足以下兩大條件,就屬於簡單請求:

請求方法是以下三種方法之一:

head

getpost

http的頭資訊不超出以下幾種字段:

accept

accept-language

content-language

last-event-id

不同時滿足上面兩個條件,就是非簡單請求

**簡易示例: cors - 伺服器設定 http header

// 第二個引數填寫允許跨域的網域名稱稱,不建議直接寫"*"

// 接收跨域的cookie

response.setheader("access-control-allow-credentials","true");

no.3 通過修改document.domain來跨域

將子域和主域的document.domain設為同乙個主域。

前提條件:這兩個網域名稱必須屬於同乙個基礎網域名稱,而且所用的協議,埠都要一致,否則無法使用document.domain來進行跨域。

詳細資訊請看

no.4 使用window.name來進行跨域

window物件有個name屬性,該屬性有個特徵:即在乙個視窗(window)的生命週期內,視窗載入的所有頁面都是共享乙個window.name的,每個頁面對window.name都有讀寫的許可權,window.name是持久存在乙個視窗載入過的所有頁面中的。

no.5 使用html5中新引進的window.postmessage方法來跨域傳送資料

window.postmessage()是html5的乙個介面,專注實現不同視窗不同頁面的跨域通訊。

**示例傳送方:

給發訊息

**示例接收方:

我是

no.6 iframe加form

jsonp只能傳送get請求,因為本質上script載入資源就是get。如果要傳送post請求可以如下

後端**:

// 處理成功失敗返回格式的工具

const = require('../utli')

class crossdomain , 'success')

}}module.exports = crossdomain

前端**:

const requestpost = () => )

form.action = url

// 在指定的iframe中執行form

form.target = iframe.name

form.method = 'post'

for (let name in data)

// 表單元素需要新增到主文件中.

form.style.display = 'none'

form.submit()

// 表單提交後,就可以刪除這個表單,不影響下次的資料傳送.

document.body.removechild(form)

}// 使用方式

requestpost(

})

no.7 ** nginx配置
server    

}

// 請求的時候直接用回前端這邊的網域名稱http://localhost:9099,這就不會跨域,然後nginx監聽到凡是localhost:9099/api這個樣子的,都**到真正的服務端位址http://localhost:9871 

同源策略和跨域

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

,同源策略和跨域

當前頁面的url 和目標請求的url不一樣 是瀏覽器的一種安全策略 所謂同源就是同乙個源頭。官方同源 協議 埠號 網域名稱必須完全相同 違背同源策略就是跨域 當前頁面的url 和目標請求的url不一樣 jsonp,jsonp是非官方的跨域解決方案,只支援get請求。它借助script標籤的跨域能力來...

CORS跨域和同源策略

同源策略 先來說說什麼是源 源 origin 就是協議 網域名稱和埠號。以上url中的源就是 若位址裡面的協議 網域名稱和埠號均相同則屬於同源。以下是相對於 的同源檢測 成功 失敗,網域名稱不同 失敗,協議不同 失敗,埠號不同 2.什麼是同源策略?同源策略是瀏覽器的乙個安全功能,不同源的客戶端指令碼...