同源策略：是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。所以a.com下的js腳本采用ajax讀取b.com里面的文件數據是會報錯的。
同源：指的是地址里面的協議(http/https)、域名和端口號均相同

不受同源策略限制的：
　　1、頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。
　　2、跨域資源的引入是可以的。但是js不能讀寫加載的內容。如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等

jsonp跨域就是利用src訪問資源不受跨域限制，所以可以通過src這個特性來實現跨域訪問數據

JSONP的原理：

　　（舉例：a.com/jsonp.html想得到b.com/jsonp.php中的數據）
在a.com的jsonp.html里創建一個回調函數xxx，動態添加<script>元素，向服務器發送請求，請求地址后面加上查詢字符串，通過callback參數指定回調函數的名字。
請求地址為http://b.com/main.js?callback=xxx。在jsonp.php中調用這個回調函數xxx，并且以JSON數據形式作為參數傳遞，完成回調。

　　如客戶想訪問 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction
　　假設客戶期望返回JSON數據：["customername1","customername2"]
　　真正返回到客戶端的數據顯示為: callbackFunction(["customername1","customername2"])

　　

<?php header('Content-type: application/json'); //獲取回調函數名 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json數據 $json_data = '["customername1","customername2"]'; //輸出jsonp格式的數據 echo $jsoncallback . "(" . $json_data . ")"; ?> //客戶端頁面 //<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="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

采用jsonp跨域也存在問題：
　　1.使用這種方法，只要是個網站都可以拿到b.com里的數據，存在安全性問題。需要網站雙方商議基礎token的身份驗證
　　2.只能是GET，不能POST。
　　3.可能被注入惡意代碼，篡改頁面內容，可以采用字符串過濾來規避此問題。

?

轉載于:https://www.cnblogs.com/changxue/p/8360097.html

總結

以上是生活随笔為你收集整理的jsonp跨域请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。