JSONP跨域請求

2019-11-19 17:20:45

字體：大中小

來源：轉載

供稿：網友

什么是跨域：

1、域名不同

2、域名相同端口不同

js出于對安全考慮不支持跨域請求。我們可以使用JSONP解決跨域問題。

一、JSONP是什么

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數據訪問的問題。由于同源策略，一般來說位于 server1.example.com 的網頁js是無法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

原理：瀏覽器在js請求中，是允許通過script標簽的src跨域請求，可以在請求的結果中添加回調方法名，在請求頁面中定義方法，既可獲取到跨域請求的數據。（js請求的不是一個單純的json數據而是一段包含json數據的js腳本）

二、模擬JSONP

服務器域名：http://localhost:8081/rest/itemcat/list

客戶端服務器：http://localhost:8082/test.html

1、普通的JS跨域請求

服務器數據：

客戶端請求代碼：

$(function(){  $.ajax(    {url: "http://localhost:8081/rest/itemcat/list?callback=myFunction",      success: function(data){      console.info(data)   }});  });

結果

XMLHttpRequest cannot load http://localhost:8081/rest/itemcat/list?callback=myFunction. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.

2、模擬JSONP請求

客戶端請求代碼：

$(function(){  greateScript("http://localhost:8081/rest/itemcat/list");  function greateScript(src) {   $("<script><//script>").attr("src", src).appendTo("body")  }  });

結果：

list?_=1488425374097:1 Uncaught SyntaxError: Unexpected token :

三、使用JSONP

環境：

服務器域名：http://localhost:8081/rest/itemcat/list

客戶端服務器：http://localhost:8082/test.html

服務端代碼（本人使用springmvc4）：

@RequestMapping("/itemcat/list") @ResponseBody public Object getItemCatList(String callback) {  CatResult catResult = itemCatService.getItemCatList();  MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);  //設置JSONP回調函數  mappingJacksonValue.setJsonpFunction(callback);  return mappingJacksonValue; }

客戶端調用代碼：

$(function(){  $.ajax(   { url: "http://localhost:8081/rest/itemcat/list",     dataType: "jsonp",    jsonp: "callback",    success: function(data){    console.info(data)   }});  });

結果：