JavaScript 九種跨域方式實現原理

2021-09-12 18:24:55 字數 640 閱讀 7955

前言

前後端資料互動經常會碰到請求跨域,什麼是跨域,以及有哪幾種跨域方式,這是本文要**的內容。

一、什麼是跨域?

1.什麼是同源策略及其限制內容?

同源策略是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到 xss、csfr 等攻擊。所謂同源是指"協議+網域名稱+埠"三者相同,即便兩個不同的網域名稱指向同乙個 ip 位址,也非同源。

同源策略限制內容有:

cookie、localstorage、indexeddb 等儲存性內容

dom 節點

ajax 請求傳送後,結果被瀏覽器攔截了

但是有三個標籤是允許跨域載入資源:

三、總結

cors 支援所有型別的 http 請求,是跨域 http 請求的根本解決方案

jsonp 只支援 get 請求,jsonp 的優勢在於支援老式瀏覽器,以及可以向不支援 cors 的**請求資料。

不管是 node 中介軟體**還是 nginx 反向**,主要是通過同源策略對伺服器不加限制。

日常工作中,用得比較多的跨域方案是 cors 和 nginx 反向**

Javascript跨域請求的幾種解決方法

一 window.name 有三個頁面 a.com proxy.html 檔案,一般是乙個沒有任何內容的html檔案,需要和應用頁面在同一域下。b.com data.html 應用頁面需要獲取資料的頁面,可稱為資料頁面。實現起來基本步驟如下 總結起來即 iframe的src屬性由外域轉向本地域,跨域...

js跨域,九種跨域方式的實現原理

什麼是跨域?1.什麼是同源策略及其限制內容?同源策略是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到xss csrf等攻擊。所謂同源是指 協議 網域名稱 埠 三者相同,即便兩個不同的網域名稱指向同乙個ip位址,也非同源。同源策略限制內容有 cookie local...

九種跨域方式實現原理

前後端資料互動經常會碰到請求跨域,什麼是跨域,以及有哪幾種跨域方式,這是本文要 的內容。本文完整的源 請猛戳github 部落格 同源策略是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到 xss csfr 等攻擊。所謂同源是指 協議 網域名稱 埠 三者相同,即便兩...