JSONP解决前端跨域问题
一：跨域問題
廣義的跨域：指一個域下的文檔或腳本試圖去請求另一個域下的資源。
1.) 資源跳轉： a鏈接、重定向、表單提交 2.) 資源嵌入： <link>、<script>、<img>、<frame>等dom標簽，還有樣式中background:url()、@font-face()等文件外鏈 3.) 腳本請求： js發起的ajax請求、dom和js對象的跨域操作等但我們通常所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。
瀏覽器同源策略：同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。
設置同源策略的目的：同源政策的目的，是為了保證用戶信息的安全，防止惡意的網站竊取數據。
設想這樣一種情況：A網站是一家銀行，用戶登錄以后，又去瀏覽其他網站。如果其他網站可以讀取A網站的 Cookie，會發生什么？很顯然，如果 Cookie 包含隱私（比如存款總額），這些信息就會泄漏。更可怕的是，Cookie 往往用來保存用戶的登錄狀態，如果用戶沒有退出登錄，其他網站就可以冒充用戶，為所欲為。因為瀏覽器同時還規定，提交表單不受同源政策的限制。由此可見，"同源政策"是必需的，否則 Cookie 可以共享，互聯網就毫無安全可言了。
同源策略的限制：
- Cookie、LocalStorage 和 IndexDB 無法讀寫
- DOM 和 Js對象無法獲得
- AJAX請求不能發送
對于第三條的AJAX請求無法發送，其實本質是，一方面瀏覽器發現一個源的js向其他源的接口發送請求時會自動帶上Origin頭標識來自的源，讓服務器能通過Origin判斷要不要向應；另一方面，瀏覽器在接收到響應后如果沒有發現Access-Control-Allow-Origin允許發送請求的域進行請求那也不允許解析。
同源策略帶來的不便：安全性和方便性是成反比的，同源策略提升了Web前端的安全性，但犧牲了Web拓展上的靈活性。設想若把html、js、css、flash，image等文件全部布置在一臺服務器上，小網站這樣湊活還行，大中網站如果這樣做服務器根本受不了的，可用性都不能保證的話。所以，現代瀏覽器在安全性和可用性之間選擇了一個平衡點。在遵循同源策略的基礎上，選擇性地為同源策略“開放了后門”。 例如img script style等標簽，都允許垮域引用資源，嚴格說這都是不符合同源要求的。然而，只能是引用這些資源，不能讀取這些資源的內容。
二：JSONP跨域解決方案
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。
jsonp的原理就是利用 script 不受同源策略的限制進行跨域，但也因此只能使用 get 方式，易受到 XSS攻擊
這里我們使用菜鳥教程提供的接口：
假設客戶期望返回數據：[“customername1”,“customername2”]。但真正返回到客戶端的數據顯示為: callbackFunction([“customername1”,“customername2”])，但瀏覽器自身機制會使其執行callbackFunction函數，并且帶有參數[“customername1”,“customername2”]。
客戶端代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="divCustomers"></div> <script type="text/javascript">function callbackFunction(result, methodName){var html = '<ul>';for (var i = 0; i < result.length; i++) {html += '<li>' + result[i] + '</li>';}html += '</ul>';document.getElementById('divCustomers').innerHTML = html;} </script> <script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> </body> </html>服務端(php)代碼：
<?php header('Content-type: application/json'); //獲取回調函數名 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json數據 $json_data = '["customername1","customername2"]'; //輸出jsonp格式的數據 echo $jsoncallback . "(" . $json_data . ")";對于jsonp操作，jQuery也提供了封裝處理，可以簡化和美化代碼，如下：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>JSONP 實例</title><script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> <script> $.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {var html = '<ul>';for(var i = 0; i < data.length; i++){html += '<li>' + data[i] + '</li>';}html += '</ul>';$('#divCustomers').html(html); }); </script> </body> </html>如果有興趣了解更多相關知識，可以來我的個人網站看看：eyes++的個人空間
總結
以上是生活随笔為你收集整理的JSONP解决前端跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 爬虫python 英文,python爬虫
- 下一篇： 快速构建Windows 8风格应用10-