一、什么是跨域访问

举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。跨域访问违反了同源策略,同源策略的详细信息可以点击如下链接:Same-origin_policy; 
总而言之,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源。

二、什么是JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用<script>元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。更具体的原理需要更多篇幅的讲解,小伙伴可以自行去百度。

三、JSONP的使用

前端的使用示例

JQuery Ajax对JSONP进行了很好的封装,我们使用起来很方便。前端示例:

    $.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //访问的链接
dataType:"jsonp", //数据格式设置为jsonp
jsonp:"callback", //Jquery生成验证参数的名称
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});

需要注意的地方是:

  • dataType,该参数必须要设置成jsonp
  • jsonp,该参数的值需要与服务器端约定,详细情况下面介绍。(约定俗成的默认值为callback)

后端的配合示例

JQuery Ajax Jsonp原理

后端要配合使用jsonp,那么首先得了解Jquery Ajax jsonp的一个特点: 
Jquery在发送一个Ajax jsonp请求时,会在访问链接的后面自动加上一个验证参数,这个参数是Jquery随机生成的,例如链接 
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 
中,参数callback=jQuery31106628680598769732_1512186387045&_=1512186387046就是jquery自动添加的。 
添加这个参数的目的是唯一标识这次请求。当服务器端接收到该请求时,需要将该参数的值与实际要返回的json值进行构造(如何构造下面讲解),并且返回,而前端会验证这个参数,如果是它之前发出的参数,那么就会接收并解析数据,如果不是这个参数,那么就拒绝接受。 
需要特别注意的是这个验证参数的名字(我在这个坑上浪费了2小时),这个名字来源于前端的jsonp参数的值。如果把前端jsonp参数的值改为“aaa”,那么相应的参数就应该是 
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046

后端接收与处理

知道了Jquery Ajax Jsonp的原理,也知道了需要接受的参数,我们就可以来编写服务器端程序了。 
为了配合json,服务器端需要做的事情可以概括为两步:

第一步、接收验证参数

根据与前端Ajax约定的jsonp参数名来接收验证参数,示例如下(使用SpringMVC,其他语言及框架原理类似)

    @ResponseBody
@RequestMapping("/getJsonp")
public String getMySeatSuccess(@RequestParam("callback") String callback){
第二步、构造参数并返回

将接收的的验证参数callback与实际要返回的json数据按“callback(json)”的方式构造:

     @ResponseBody
@RequestMapping("/getMySeat")
public String getMySeatSuccess(@RequestParam("callback") String callback){
Gson gson=new Gson(); //google的一个json工具库
Map<String,String> map=new HashMap<>();
map.put("seat","1_2_06_12");
return callback+"("+gson.toJson(map)+")"; //构造返回值
}

四、总结

最终,前后端的相应代码应该是这样的: 
前端

    $.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //访问的链接
dataType:"jsonp", //数据格式设置为jsonp
jsonp:"callback", //Jquery生成验证参数的名称
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});

后端

    @ResponseBody
@RequestMapping("/getMySeat")
public String getMySeatSuccess(@RequestParam("callback") String callback){
Gson gson=new Gson();
Map<String,String> map=new HashMap<>();
map.put("seat","1_2_06_12");
logger.info(callback);
return callback+"("+gson.toJson(map)+")";
}

需要注意的是:

  • 前端注意与后端沟通约定jsonp的值,通常默认都是用callback。
  • 后端根据jsonp参数名获取到参数后要与本来要返回的json数据按“callback(json)”的方式构造。
  • 如果要测试的话记得在跨域环境(两台机器)下进行。

从前端和后端两个角度分析jsonp跨域访问(完整实例)的更多相关文章

  1. 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  2. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

  3. 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)

    原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...

  4. 微信授权、获取用户openid-纯前端实现——jsonp跨域访问返回json数据会报错的纯前端解决办法

    近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活. 首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url https ...

  5. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

  6. http与websocket(基于SignalR)两种协议下的跨域基于ASP.NET MVC--竹子整理

    这段时间,项目涉及到移动端,这就不可避免的涉及到了跨域的问题.这是本人第一次接触跨域,有些地方的配置是有点麻烦,导致一开始的不顺. 至于websocket具体是什么意义,用途如何:请百度. 简单说就是 ...

  7. Spring Cloud 前后端分离后引起的跨域访问解决方案

    背景 Spring Cloud 微服务试点改造,目前在尝试前后端分离. 前台A应用(本机8080端口),通过网管(本机8769端口)调用后台应用B(本机8082端口).应用C发布的http服务.. A ...

  8. java后台设计简单的json数据接口,设置可跨域访问,前端ajax获取json数据

    在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...

  9. 前后端API交互数据加密——AES与RSA混合加密完整实例

    前言 前段时间看到一篇文章讲如何保证API调用时数据的安全性(传送门:https://blog.csdn.net/ityouknow/article/details/80603617),文中讲到利用R ...

随机推荐

  1. BZOJ1805[Ioi2007]Sail船帆——线段树+贪心

    题目描述 让我们来建造一艘新的海盗船.船上有 N个旗杆,每根旗杆被分成单位长度的小节.旗杆的长度等于它被分成的小节的数目.每根旗杆上会挂一些帆,每张帆正好占据旗杆上的一个小节.在一根旗杆上的帆可以任意 ...

  2. Matplotlib python 基本用法

    1.简单的绘制函数 import matplotlib.pyplot as plt import numpy as np x = np.linspace(-1, 1, 50) y1 = x + 1 p ...

  3. MT【41】利用不等式妙消参数

    已知$\theta\in[0,2\pi]$对任意$x\in[0,1],2x^2sin\theta-4x(1-x)cos\theta+3(1-x)^2>0$恒成立.求$\theta$的范围. 解答 ...

  4. Python爬虫:HTTP协议、Requests库

    HTTP协议: HTTP(Hypertext Transfer Protocol):即超文本传输协议.URL是通过HTTP协议存取资源的Internet路径,一个URL对应一个数据资源. HTTP协议 ...

  5. 自学Zabbix11.6 Zabbix SNMP自定义OID

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix11.6 Zabbix SNMP自定义OID 为什么要自定义OID? 前面已经讲过 ...

  6. 自学Zabbix13.2 分布式监控proxy配置

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix13.2 分布式监控proxy配置 分为两部分: 安装proxy 配置proxy ...

  7. android 开发中 sdk 无法更新

    现在用到android 的多个版本适配 , 换了个新环境 , 重新配置了android 的开发环境,哪想到遇到了很多小问题.  今天又遇到了 android sdk manager 无法更新的问题.  ...

  8. [hgoi#2019/2/16t3]psolve

    题目描述 Dustar有n道题目要做.他的月薪是m元. 由于题目是一流的难题,所以Dustar不得不找个人来帮(代)助(替)他写作业. 找人写作业不是免费的,但是他们能保证在一个月内做出任何题目.每做 ...

  9. 【ARC063E】Integers on a tree

    Description 给定一棵\(n\)个点的树,其中若干个点的权值已经给出.现在请为剩余点填入一个值,使得相邻两个点的差的绝对值恰好为1.请判断能否实现,如果能,请将方案一并输出. Solutio ...

  10. Mongodb中经常出现的错误(汇总)child process failed, exited with error number

    异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 异常处理汇总-数据库系列  http://www.cnblogs.com/dun ...