Web前端面試指導(四十六)：你瞭解跨域請求嗎？
題目點評
主要考察對web安全是否有接觸 ，關於安全方面的在面試時是經常被問到的。同一個意思可能問法也不同，比如說：“你對跨域瞭解嗎？”“什麼是跨域請求了？”其實都是同一個意思，回答思路可以先回答什麼是跨域請求，有什麼方式可以實現跨域請求基本上就可以了。
什麼是跨域請求
基於JavaScript的安全，JavaScript同源策略要求一個網站不能呼叫其它網站的js物件。構成跨域的條件就是一個頁面的URL協議、域名、埠與另一個頁面的URL只要有一個不同就構成了跨域請求。為了輔助大家的理解，看下面的表格就是知道是什麼意思了！|
URL |
說明 |
是否允許通訊 |
|
http://www.a.com/a.js |
同一域名下 |
允許 |
|
http://www.a.com/lab/a.js |
同一域名下不同資料夾 |
允許 |
|
http://www.a.com:8000/a.js |
同一域名，不同埠 |
不允許 |
|
http://www.a.com/a.js |
同一域名，不同協議 |
不允許 |
|
http://www.a.com/a.js |
域名和域名對應ip |
不允許 |
|
http://www.a.com/a.js |
主域相同，子域不同 |
不允許 |
|
http://www.a.com/a.js |
同一域名，不同二級域名（同上） |
不允許（cookie這種情況下也不允許訪問） |
|
http://www.cnblogs.com/a.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>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();
});
缺點
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>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