資訊專欄INFORMATION COLUMN
摘要：同源策略做了很嚴格的限制，但是在實際的場景中，又確實有很多地方需要突破同源策略的限制，也就是我們常說的跨域。使用跨域由于同源策略，一般來說位于的網頁無法與不是的服務器溝通，而的元素是一個例外。
本菜雞最近在寫某個頁面請求數據時，報了如下的錯誤。
Failed to load https://...:
No "Access-Control-Allow-Origin" header is present on the requested resource.
Origin "http://127.0.0.1:7070" is therefore not allowed access.
了解原因后，得知是由于跨域請求導致的，學習了一下跨域及同源策略相關知識后，寫了個demo玩玩
簡單聊聊跨域要了解跨域，必須先了解瀏覽器同源策略，接下來搬運了一些大神的總結
什么是同源策略？同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。
同源策略限制以下幾種行為：
1.Cookie、LocalStorage 和 IndexDB 無法讀取 2.DOM 和 Js對象無法獲得 3.AJAX 請求不能發送
假設沒有同源策略，那么我在A網站下的cookie就可以被任何一個網站拿到；那么這個網站的所有者，就可以使用我的cookie(也就是我的身份)在A網站下進行操作。同源策略可以算是 web 前端安全的基石，如果缺少同源策略，瀏覽器也就沒有了安全性可言。
同源策略做了很嚴格的限制，但是在實際的場景中，又確實有很多地方需要突破同源策略的限制，也就是我們常說的跨域。
跨域的方法有很多（如接下來要玩的jsonp跨域，還有cors跨域資源共享，反向代理等等）。
由于同源策略，一般來說位于 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通，而HTML的
我們可以直接拿來使用，配合jsonp就能實現跨域獲取輸入框內容相關熱點數據并點擊跳轉了，具體實現請看Github項目源碼
實現效果：
頁面結構非常簡單，如圖:
jsonp跨域實現代碼
document.onkeyup = function () {
var val = text.value
var script = document.createElement("script")
script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${val}&cb=dosomething`;
document.body.appendChild(script)
}
function dosomething (data) {
var oUl = document.querySelector("#lists ul")
oUl.innerHTML = ""
data.s.map(function (html) {
var oLi = document.createElement("li")
oLi.innerHTML = html
oLi.onclick = function () {
window.location.href = `http://www.baidu.com/s?wd=${html}`
}
oUl.appendChild(oLi)
})
}
僅僅是一個利用jsonp實現跨域的簡單小demo，便于和我一樣的新手學習，其它結構和樣式文件就不一一列出來了，可以到我下載我的完整項目查看
完整項目地址：Github:baidu_demo
參考文章：
前端常見跨域解決方案（全）
JSONP和CORS實現跨源請求
再也不學AJAX了！（三）跨域獲取資源 ② - JSONP & CORS
jsonp跨域請求詳解——從繁至簡
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52538.html
摘要：同源策略做了很嚴格的限制，但是在實際的場景中，又確實有很多地方需要突破同源策略的限制，也就是我們常說的跨域。使用跨域由于同源策略，一般來說位于的網頁無法與不是的服務器溝通，而的元素是一個例外。 本菜雞最近在寫某個頁面請求數據時，報了如下的錯誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
摘要：同源策略做了很嚴格的限制，但是在實際的場景中，又確實有很多地方需要突破同源策略的限制，也就是我們常說的跨域。使用跨域由于同源策略，一般來說位于的網頁無法與不是的服務器溝通，而的元素是一個例外。 本菜雞最近在寫某個頁面請求數據時，報了如下的錯誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
摘要：四跨域攻擊跨域攻擊可以理解為誘導受害者訪問非法網站，黑客利用受害者的會話信息模擬請求，以達到篡改數據的目的。我們在百度上搜索一些關鍵字之后，訪問其他網站時例如會發現，為何我剛剛搜索的關鍵字圖片會在網頁上顯示那很有可能放置了百度的腳本代碼。 本人工作中偶爾會和瀏覽器打交道，也遇到過一些坑，在此分享一下網頁跨域訪問的相關場景和知識，希望對讀者有幫助。本文來自于我的博客網站：www.51th...
摘要：四跨域攻擊跨域攻擊可以理解為誘導受害者訪問非法網站，黑客利用受害者的會話信息模擬請求，以達到篡改數據的目的。我們在百度上搜索一些關鍵字之后，訪問其他網站時例如會發現，為何我剛剛搜索的關鍵字圖片會在網頁上顯示那很有可能放置了百度的腳本代碼。 本人工作中偶爾會和瀏覽器打交道，也遇到過一些坑，在此分享一下網頁跨域訪問的相關場景和知識，希望對讀者有幫助。本文來自于我的博客網站：www.51th...
閱讀 2233·2021-09-23 11:52
閱讀 1899·2021-09-02 15:41
閱讀 3018·2019-08-30 10:47
閱讀 1984·2019-08-29 17:14
閱讀 2334·2019-08-29 16:16
閱讀 3192·2019-08-28 18:29
閱讀 3418·2019-08-26 13:30
閱讀 2610·2019-08-26 10:49
