欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JSONP跨域请求

程序员文章站 2022-06-08 22:19:04
什么是跨域: 1、域名不同 2、域名相同端口不同 js出于对安全考虑不支持跨域请求。我们可以使用jsonp解决跨域问题。 一、jsonp是什么 jsonp(jso...

什么是跨域:

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跨域请求

二、模拟jsonp

服务器域名:

客户端服务器:

1、普通的js跨域请求

服务器数据:

JSONP跨域请求

客户端请求代码:

$(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

环境:

服务器域名:

客户端服务器:

服务端代码(本人使用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)
   }}); 
 });

结果:

JSONP跨域请求

看返回结果可以发现返回的数据不是一段单纯的json数据,而是一段js函数。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!