1. 程式人生 > >Web前端面試指導(四十六):你瞭解跨域請求嗎?

Web前端面試指導(四十六):你瞭解跨域請求嗎?

題目點評

主要考察對web安全是否有接觸 ,關於安全方面的在面試時是經常被問到的。同一個意思可能問法也不同,比如說:“你對跨域瞭解嗎?”“什麼是跨域請求了?”其實都是同一個意思,回答思路可以先回答什麼是跨域請求,有什麼方式可以實現跨域請求基本上就可以了。

什麼是跨域請求

基於JavaScript的安全,JavaScript同源策略要求一個網站不能呼叫其它網站的js物件。構成跨域的條件就是一個頁面的URL協議、域名、埠與另一個頁面的URL只要有一個不同就構成了跨域請求。為了輔助大家的理解,看下面的表格就是知道是什麼意思了!

URL

說明

是否允許通訊

http://www.a.com/a.js
http://www.a.com/b.js

同一域名下

允許

http://www.a.com/lab/a.js
http://www.a.com/script/b.js

同一域名下不同資料夾

允許

http://www.a.com:8000/a.js
http://www.a.com/b.js

同一域名,不同埠

不允許

http://www.a.com/a.js
https://www.a.com/b.js

同一域名,不同協議

不允許

http://www.a.com/a.js
http://70.32.92.74/b.js

域名和域名對應ip

不允許

http://www.a.com/a.js
http://script.a.com/b.js

主域相同,子域不同

不允許

http://www.a.com/a.js
http://a.com/b.js

同一域名,不同二級域名(同上)

不允許(cookie這種情況下也不允許訪問)

http://www.cnblogs.com/a.js
http://www.a.com/b.js

不同域名

不允許

特別注意兩點:
第一:如果是協議和埠造成的跨域問題“前臺”是無能為力的,
第二:在跨域問題上,域僅僅是通過“URL的首部”來識別而不會根據域名對應的IP地址是否相同來判斷。
“URL的首部”可以理解為“協議, 域名 和 埠 必須匹配”。


解決跨域請求的方式

(一)JSONP

情景:網站http://localhost:63342/ 頁面要請求http://localhost:3000/users/userlist  頁面,userlist頁面返回json字串格,如下圖:


埠號為63342網站的一個頁面index.html通過ajax請求url http://localhost:3000/users/userlist ,這個明顯的出現了跨域請求,因為埠號不一樣。請求時發生的錯誤如下:


解決方式,採用JSONP方式來請求
index.html

<script>
    $.ajax({
        url:"http://localhost:3000/users/userlist",
        type:"get",
        dataType:"jsonp",
        success:function(e){
            console.log(e);
        }
    });
</script>
Node.js 伺服器程式碼
router.get("/userlist", function (req, res, next) {
    var callback=req.query["callback"];
    var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'};
    res.write(callback+"("+ JSON.stringify(user)+")");
    res.end();
});
成功請求的結果


缺點:
1、這種方式無法傳送post請求
有點
1.使用比較方便
2.很多大型的網站也是採用這種方式

(二)在伺服器端設定同源策略地址


router.get("/userlist", function (req, res, next) { 
    var user = {name: 'Mr.Cao', gender: 'male', career: 'IT Education'};
    res.writeHeader(200,{"Access-Control-Allow-Origin":'http://localhost:63342'});
    res.write(JSON.stringify(user));
    res.end();
});
在響應頭上新增Access-Control-Allow-Origin屬性,指定同源策略的地址。同源策略預設地址是網頁的本身。


缺點
1.目前IE瀏覽器的老版本還不支援

(三)H5新特性postMessage
傳送資訊頁面  http://localhost:63342/index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域請求</title> 
</head>
<body>
    <iframe src="http://localhost:3000/users/reg" id="frm"></iframe>
    <input type="button" value="OK" onclick="run()">
</body>
</html>
<script>
   function  run(){
        var frm=document.getElementById("frm");
        frm.contentWindow.postMessage("跨域請求資訊:智學無憂IT教育","http://localhost:3000");
   }
</script>
接收資訊頁面 http://localhost:3000/message.html
window.addEventListener("message",function(e){
        console.log(e.data);
    },false);


相關推薦

Web前端面試指導()瞭解請求

題目點評 主要考察對web安全是否有接觸 ,關於安全方面的在面試時是經常被問到的。同一個意思可能問法也不同,比如說:“你對跨域瞭解嗎?”“什麼是跨域請求了?”其實都是同一個意思,回答思路可以先回答什麼是跨域請求,有什麼方式可以實現跨域請求基本上就可以了。 什麼是跨域請求

Web前端面試指導(五)頁面渲染原理是什麼?

題目點評 這是一道純理論的題目,只要能夠將瀏覽器的渲染過程很專業的表述出來,一定會得到面試官的青睞,作為一枚前端人員確實有必要了解一下瀏覽器的渲染過程是怎樣的,對於頁面效能的提升是有幫助的。 解題思路 渲染引擎是幹什麼的 渲染引擎可以顯示html、xml文件及圖片,它也可以

Web前端面試指導()什麼是響應式開發?

題目點評 響應式開發是前端開發工作比較常見的工作內容,隨著移動端的發展,網頁設計必須考慮到移動端的設計,同一個網站為了相容PC端和移動端顯示,響應式開發是前端開發人員必備的技術,所以響應式開發的技術必須掌握。 什麼是響應式 顧名思義,同一個網站相容不同的大小的裝置。如PC端

Web前端面試指導(二九)Ajax 是什麼? 如何建立一個Ajax?

題目點評 Ajax 是在工作中是必用的技術,在面試中十有八九會問的,答題的思路最好先回答原生態Ajax使用的步驟,最後告訴面試官,我們在工作中是使用Jquery來實現Ajax請求和處理的。在回答的時候儘量詳盡,包括方法的引數的個數,順序和作用,以免被面試官抓住不放。不給面試

Web前端面試指導(二八)什麼是閉包,為什麼要用它?

題目點評 閉包這個概念也是JavaScript中比較抽象的概念,也是JavaScript中的一個難點,要求對理論知識理解的比較透徹,概念性的東西一兩句就講完了,所以這道題目可以死記硬背,如果實在不能理解的話。 解題思路 閉包是什麼 你可以這樣回答: 我個人理解,閉包是就是函

Web前端面試指導(三一)談談對this的理解

題目點評 主要考察你對面向物件程式設計的理解,特別是物件的指向問題,如果連物件的指向都搞不清楚,很難說明你是一個優秀的前端開發人員,所以回答this的知識點是體現你的身價的時候到來了!如果能夠回答好這個問題,那麼在面試上你是增值的。個人建議,可以先回答this在不同的場合指

Web前端面試指導(三七)eval是做什麼的?

題目點評 這題目的看起來比較簡單,但是總感覺有沒有那麼簡單,確實是這樣子。所以回答這個題目要從不同的角度去回答。首先回答清楚它是幹什麼的有什麼用,然後在談談它對作用域的影響,然後就是執行效率的問題,最後談談eval()的其它作用。這樣答下來自己都覺得滿意了吧! eval()

Web前端面試指導(二)事件是什麼?如何阻止事件冒泡?

題目點評 這題目的問題是一脈相承的,第一個問題和後面的問題有關聯,所以回答第一個問題時一定要涉及到事件執行的原理和過程,必須引出事件冒泡,有了事件冒泡才有第二問題如何阻止冒泡。 回答思路 事件是什麼?   事件用於監聽瀏覽器的操作行為,瀏覽器觸發動作時被捕捉到而呼叫相應的

Web前端面試指導(十三)請描述一下 cookies,sessionStorage 和 localStorage 的區別?

題目點評 這是一種對比性比較強的問題,可以先說他們的相同點,然後就是要詳細闡述他們的不同點,而不同點不要刻意去對比,只要說出各自的特點,自然他們的不同點就出來了。解決方法相同點:都儲存在客戶端不同點: 1.儲存大小 cookie資料大小不能超過4k。sessionSto

Web前端面試指導()如何居中一個元素(正常、絕對定位、浮動元素)?

web前端題目點評這道題目的提問比較多,連續問了三個問題,正常元素、絕對定位元素、互動元素如何居中,而且居中沒有說清楚是垂直居中還是水平居中,要回答清楚這個問題,必須得有深厚的功底,而且要分類的來回答,條理要清楚。可以先把水平居中各種情況說清楚,然後在把垂直居中說清楚。(一)元素水平居中的方式1)行級元素水平

Web前端面試指導(一)樣式導入有哪些方式?

web前端樣式導入方式linkimport使用方式link的使用[css] view plain copy <link href="index.css" rel="stylesheet"> import的使用[css] view plain copy <style type="text/c

Web前端面試指導(七)一個滿屏 品 字布局 如何設計?

web前端題目點評這道題目有可能是筆試題,有可能面談的時候進行敘述,如果是筆試題要求對css樣式代碼非常熟練,如果是面談敘述,就需要你的表達能力非常強,要抓住要點,把需要用到的技能點講清楚就可以了。需要用到技術1. 元素水平居中對齊1) 使用margin對齊(推薦)2) 使

Web前端面試指導(八)用純CSS創建一個三角形的原理是什麽?

web前端題目點評三角形的圖標在網頁設計是很常見的,屬於基本常識題,只要在練習做到過這個功能都能回答出來,可以把你做過的思路描述出來就可以了,本題的難易程度為簡單本文出自 “智學無憂1” 博客,轉載請與作者聯系!Web前端面試指導(十八):用純CSS創建一個三角形的原理是什麽?

Web前端面試指導(八)iframe有那些缺點

-----------------------------------------------------------------------------------------------------------------------------------------

練習列表排序,刪除list中重復的元素

結果 clas code lag 轉換 十六 == 但是 列表 方法一:使用集合set;將list直接轉換為set 1 a = [1,3,4,3,5,7] 2 a = list(set(a)) 3 print(a)執行結果:[1, 3, 4, 5, 7]方法二:直

練習列表排序,刪除list中重複的元素

方法一:使用集合set;將list直接轉換為set 1 a = [1,3,4,3,5,7] 2 a = list(set(a)) 3 print(a) 執行結果: [1, 3, 4, 5, 7] 方法二:直接排序,然後逐個比較,鑑於del會直接把元素刪除,設定個flag陣列來編輯該刪除的

性能測試JavaMall項目需求調研和環境部署

pps goods linux下 由於 發生 註意 指標 但是 驗證碼識別 javamall項目一個完整的電子商務網站,包含瀏覽、搜索、支付、購物車、下單等功能 由於此項目為商業性的,所以部署的時候一檢測到時liunx系統就會無法訪問,所以需先在windows下部署(要

性能測試Linux 從網卡模擬延時和丟包的實現

時間 使用 技術分享 壓力 單位 del 命令 add 好用 Linux 中模擬延時和丟包的實現 使用ifconfig命令查看網卡 Linux 中使用 tc 進行流量管理。具體命令的使用參考 tc 的 man 手冊,這裏簡單記錄一下使用 tc 模擬延時和丟包的命令

【Unity 3D】學習筆記輸入與控制——鍵盤事件

在遊戲中,玩家控制主角移動,按鍵攻擊,選擇行走。都需要在程式中監聽玩家的輸入。unity為開發者提供了input庫,來支援鍵盤事件,滑鼠事件以及觸控事件。本文主要回顧鍵盤事件,以後會逐文複習滑鼠以及觸控事件。 鍵盤事件 一般的PC鍵盤有104個不同的按鍵,在程式中通過監

前端jquery ajax 請求問題解決彙總

一般情況下跨域分兩種請求方式:post、get; 1、post請求解決方式: spring cloud 專案下: 後臺demo: @CrossOrigin(allowCredentials = "true", allowedHeaders = "*", methods = {Requ