資訊專欄INFORMATION COLUMN
摘要：上節我們講了同源策略，這節我們講講如何跨域。當這些從的腳本執行出錯，因為違背了同源策略為了保證用戶信息不被泄露，錯誤信息不會顯示出來，取而代之只會返回一個。
前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。
JSONP 跨域請求原理以及實現方式jQuery封裝的Ajax調用和JSONP數據跨域請求原理和實現
這節題目有點奇怪啊。
上節我們講了同源策略，這節我們講講如何跨域。這東西就和產品提需求一樣，我知道不合理，但是我就想要。
iframe 跨域
比如 www.51vv.com 的一部分（header吧），我 k.51vv.com 也想用。默認情況下不同源，是不允許的。那我們怎么辦呢？
domain
postMessage
ajax 跨域
JSONP
CORS
服務器代理
canvas 資源跨域
image 跨域
script 資源跨域
Script error.
為了提升網站的訪問速度，我們通常都會將靜態資源文件(css, image, javascript)放在CDN。當這些從CDN的JavaScript腳本執行出錯，因為違背了同源策略, 為了保證用戶信息不被泄露，錯誤信息不會顯示出來，取而代之只會返回一個Script error.。
這部分知識是我們開發中經常會遇到的。下面我們來介紹一下常見的幾種方法。
JSONP 跨域方案 JSONP 優缺點
優點
瀏覽器兼容性強（全支持）
缺點
不安全（嵌入異常邏輯代碼）
只能發GET請求
JSONP 原理下面我們來說一下JSONP的原理，順便分析一下上面的優缺點。
首先 script 標簽引入的代碼，不管跨不跨域都可以執行。常見的就是CDN的資源，我們拿來使用。
正常的JSON數據為{code: 200, res: [{id:1,state:0},{id:2,state:1}]}。
如果我們 script 標簽引入的資源就是帶數據的。
比如console.log({code: 200, res: [{id:1,state:0},{id:2,state:1}]})，這樣不就等于拿到了數據？
服務端拼接callback名稱，動態生成返回數據。
從上面的原理看到JSONP就等于用script加載代碼?；?b>
初級階段文章目錄前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）
前端培訓-初級階段（13） - 正則表達式
前端培訓-初級階段（13） - 類、模塊、繼承
前端培訓-初級階段（13） - ECMAScript （內置對象、函數）
前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）
前端培訓-初級階段（13、18）
前端培訓-初級階段（9 -12）
前端培訓-初級階段（5 - 8）
前端培訓-初級階段（1 - 4）
中級階段文章目錄前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）
前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）
前端培訓-中級階段（5）- jQuery的概念與基本使用（2019-07-11期）
前端培訓-中級階段（6）- jQuery元素節點操作（2019-07-18期）
前端培訓-中級階段（7）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）
前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）
前端培訓-中級階段（9）- 原生Ajax的運行原理與實現（2019-08-08期）
前端培訓-中級階段（10）- 同源策略（2019-08-15期）
資料前端培訓目錄、前端培訓規劃、前端培訓計劃
瀏覽器同源策略及跨域的解決方法
Same-origin policy
Script error.全面解析
之前雖然也知道這個錯誤。但是沒有仔細看過。直到靜態資源上CDN，才發現了這個問題。
跨域資源共享 CORS 詳解 - 阮一峰的網絡日志
記得當初是一個上傳功能，需要走統一上傳服務器發現了CORS和OPTIONS。就是在大佬這里看懂的。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106032.html
摘要：前端最基礎的就是。的原理瀏覽器發送請求，服務器給出響應。保持之前的界面不變化。的核心創建一個對象，用于發起請求設置為請求，請求發送請求。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。 ajax ...
摘要：前端最基礎的就是。的原理瀏覽器發送請求，服務器給出響應。保持之前的界面不變化。的核心創建一個對象，用于發起請求設置為請求，請求發送請求。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。 ajax ...
摘要：同源策略是什么同源策略是瀏覽器的一個安全功能，不同源的數據禁止訪問?；蛟S你可以說驗證，在瀏覽器沒有同源策略的情況下這些都可以繞過去。總結同源策略是蠻好的，防御了大部分的攻擊。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思...
摘要：前端最基礎的就是。幫助從舊的事件方法轉換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數。用于過濾器的觸發事件的選擇器元素的后代。事件觸發模擬觸發原生使用觸發。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS）...
閱讀 2716·2021-09-24 09:47
閱讀 4366·2021-08-27 13:10
閱讀 2981·2019-08-30 15:44
閱讀 1281·2019-08-29 12:56
閱讀 2594·2019-08-28 18:07
閱讀 2614·2019-08-26 14:05
閱讀 2552·2019-08-26 13:41
閱讀 1265·2019-08-26 13:33
