JSONP跨域请求_网络技术_宿州市腾雀网络科技有限公司

JSONP跨域请求

发布时间 - 2026-01-10 23:23:20 点击率：次

什么是跨域：

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)
   }}); 
 });

结果：

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

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

# jsonp # 跨域请求 # JSONP跨域GET请求解决Ajax跨域访问问题 # AJAX跨域请求之JSONP获取JSON数据 # 跨域请求的完美解决方法(JSONP # CORS) # JSONP跨域请求实例详解 # 关于JSONP跨域请求原理的深入解析 # 客户端 # 回调 # 是一个 # 不支持 # 可以使用 # 既可 # 可以得到 # 抓到 # 服务端 # 而不是 # 可用于 # rest # list # itemcat # localhost # center # align # function # http # pre

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Yii1.0和Yii2.0的区别？

下一篇：Yii2为何性能高？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Yii1.0和Yii2.0的区别？

下一篇：Yii2为何性能高？