前端之同源策略和跨域問題解決方法

2021-09-27 07:28:51 字數 1826 閱讀 9295

知識點
同源策略詳情存在必要性:**csrf攻擊

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

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

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

載入 css js 可無視同源策略

oh my

god! 那為什麼 css js 可無視

同源策略???

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

所有的跨域,都必須經過server端允許和配合

未經server端允許就實現跨域,說明瀏覽器有漏洞,危險訊號

首先,我們要先明白

訪問 服務端一定會返回乙個html檔案嗎?

服務端可以任意動態拼接資料返回,只要符合html格式要求。

同理於:**示例接收方:

我是

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(

})

server    

}

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

})

其他有趣的跨域問題

_(¦3」∠)_前端知識體系 目錄結構

跨域問題解決

原文 當前端頁面與後台執行在不同的伺服器時,就必定會出現跨域這一問題,本篇簡單介紹解決跨域的三種方案,部分 截圖如下,僅供參考 方式一 使用ajax的jsonp 前端 伺服器 使用該方式的缺點 請求方式只能是get請求 方式二 使用jquery的jsonp外掛程式 前端 伺服器 使用該方式的特點 與...

跨域問題解決

筆記於學習尚矽谷課程所作 同源策略 是指協議,網域名稱,埠都要相同,其中有乙個不同都會產生跨域 解決1 使用nginx部署為同一域 解決2 配置當次請求允許跨域 新增響應頭 解決2如下 將配置放在閘道器 configuration public class gulimallcorsconfiggur...

跨域問題解決

1 定義 協議 ip 埠號都一樣的url稱為同源,來自同一伺服器 2 同源策略 瀏覽器為了安全起見,有乙個約束,要求瀏覽器執行的指令碼只能同源訪問。預設如果訪問的不是同源,則攔截這個訪問 3 目的 是為了保證 戶資訊的安全,防 惡意的 站竊取資料 4 解決方案1 jsonp 在html頁面中通過相應...