前端面试之----跨域解决方案之二（JSONP）

已于 2022-03-10 14:51:25 修改
阅读量405 收藏 1
点赞数
分类专栏： 前端面试 文章标签： 前端 面试 vue.js
于 2021-12-29 23:39:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60237095/article/details/122226793
版权

前言

首先我们得先了解JSONP是怎么产生的。
最开始跨域请求数据没有现在方便，Ajax直接请求普通文件存在跨域无权限访问的问题，然后聪明的程序员想出了一套非官方的解决办法，程序员发现凡是带有“src”这个属性的标签都拥有跨域的能力，比如<·img>、<·iframe>、<·script>。
事实上早期的程序员也是这么干的，最后程序员们发现最好的解决办法就是——动态创建script标签发起请求，然后从后端拿到请求回来的数据进行处理，再然后把刚刚创建的script标签删掉，这就是JSONP的整套流程。做完这一切，在用户的角度是感觉不到动态创建script标签以及发送请求的，用户体验非常好，因此JSONP提供了一种各方都很满意的跨域解决方案。

何为JSONP

​ JSONP是JSON with Padding的略称，JSONP为民间提出的一种跨域解决方案，通过客户端的script标签发出的请求方式。

一、什么是JSONP（JSON With Padding）?

动态添加<script>来调用服务器提供的js脚本。

这是一种非正式的传输方式，由于发现js文件不受同源策略的影响，包括含有src的标签都不受影响。所以通过web动态添加<script>，通过src调用服务器同时带上一个callback的参数，服务器创建一个包裹返回数据的函数，函数名就是callback的参数，最终返回一个可执行的js函数调用。

二、如何使用JSONP解决跨域问题？

现有如下两个服务器：A: http://localhost:8080 和B:http://localhost:8888，浏览器访问地址：

http://localhost:8080/mybatis/jsp/test.jsp

1、正常ajax访问，出现的跨域问题

访问 http://localhost:8080/mybatis/home

前端代码：

$.ajax({
	url : 'http://localhost:8080/mybatis/home',
	type : 'get',
	data : {
		name : "8080"
	},
	success : function(resp) {
		console.log(resp);
	}
});

服务器：

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String name = req.getParameter("name");
    resp.getWriter().append("welcome "+ name + " !");
}

结果：正常访问

访问http://localhost:8888/mybatis/home

前端代码：

$.ajax({
	url : 'http://localhost:8888/mybatis/home',
	type : 'get',
	data : {
		name : "8888"
	},
	success : function(resp) {
		console.log(resp);
	}
});

服务器：

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String name = req.getParameter("name");
    resp.getWriter().append("welcome "+ name + " !");
}

结果：不能访问

因为同源策略，端口不同出现跨域访问。

2、动态创建script

访问http://localhost:8888/mybatis/home

前端代码：

$("head").append("<script src='http://localhost:8888/mybatis/ScriptServlet?name=script&callback=testscript'><\/script>");
 
//或者如下js
//var sc = document.createElement("script");
//sc.src = "http://localhost:8888/mybatis/ScriptServlet?name=script&callback=testscript";
//document.body.insertBefore(sc,document.body.firstChild);
 
 
function testscript(resp) {
	console.log(resp);
}

服务器：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String callback = request.getParameter("callback");
    String name = request.getParameter("name");
    response.getWriter().append(callback+"(\""+name+"\")");
}

结果：可以访问

通过js创建一个<script>标签，同时在请求的地址中拼接一个callback=testscript的参数；

在服务器中，获取callback的参数值，与返回数据拼装成一个可执行的函数：testscript("+返回的数据+");

返回到web后自动执行testscript函数。

3、jquery的JSONP方式

访问http://localhost:8888/mybatis/home

前端代码：

$.ajax({
    url : 'http://localhost:8888/mybatis/ScriptServlet',
    type : 'get',
    data : {
	    name : 'test 8888,jsonp'
    },
    dataType : 'jsonp',
//      jsonp:'othercallback', //指定参数名称，即callback改为othercallback，所以后台获取相应也要改为request.getParameter("othercallback")
//      jsonpCallback:'othername', //指定回调函数名称
    success : function(resp) {
		console.log(resp);
    }
});

服务器：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String callback = request.getParameter("callback");
    String name = request.getParameter("name");
    response.getWriter().append(callback+"(\""+name+"\")");
}

结果：可以访问

 只需要在ajax方法里，添加一个dataType:'jsonp'参数即可。乍一看，咋没有回调函数的名称，其实查看url就知道了，

4、jsonp全部参数

访问http://localhost:8888/mybatis/home

前端代码：

$.ajax({
    url : 'http://localhost:8888/mybatis/ScriptServlet',
    type : 'get',
    data : {
	    name : 'test 8888,jsonp'
    },
    dataType : 'jsonp',
    jsonp:'othercallback', //指定参数名称，即callback改为othercallback，所以后台获取相应也要改为request.getParameter("othercallback")
    jsonpCallback:'othername', //指定回调函数名称
    success : function(resp) {
		console.log("ajax:"+resp);
    }
});
 
 
function othername(resp){
    console.log("othername:"+resp);
}

服务器：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String callback = request.getParameter("othercallback");
    String name = request.getParameter("name");
    response.getWriter().append(callback+"(\""+name+"\")");
}

结果：可以访问

5、使用getJSON

访问http://localhost:8888/mybatis/home

前端代码：

$.getJSON("http://localhost:8888/mybatis/ScriptServlet?name=getJSON&othercallback=?",function(resp){
	console.log(resp);
});

服务器：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String callback = request.getParameter("othercallback");
    String name = request.getParameter("name");
    response.getWriter().append(callback+"(\""+name+"\")");
}

结果：可以访问

 6、前端全部代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>This is 8080 page</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
	
</script>
<script type="text/javascript">
	$(function() {
		$("a").click(function() {
			switch ($(this).attr("id")) {
			case "1":
				$.ajax({
					url : 'http://localhost:8080/mybatis/home',
					type : 'get',
					data : {
						name : "8080"
					},
					success : function(resp) {
						console.log(resp);
					}
				});
				break;
			case "2":
				$.ajax({
					url : 'http://localhost:8888/mybatis/home',
					type : 'get',
					data : {
						name : "8888"
					},
					success : function(resp) {
						console.log(resp);
					}
				});
				break;
			case "3":
				$("head").append("<script src='http://localhost:8888/mybatis/ScriptServlet?name=script&callback=testscript'><\/script>");
// 				var sc = document.createElement("script");
// 				sc.src = "http://localhost:8888/mybatis/ScriptServlet?name=script&callback=testscript";
// 				document.body.insertBefore(sc,document.body.firstChild);
				break;
			case "4":
				$.ajax({
				    url : 'http://localhost:8888/mybatis/ScriptServlet',
				    type : 'get',
				    data : {
					    name : 'test 8888,jsonp'
				    },
				    dataType : 'jsonp',
//				    jsonp:'othercallback', //指定参数名称，即callback改为othercallback，所以后台获取相应也要改为request.getParameter("othercallback")
//				    jsonpCallback:'othername', //指定回调函数名称
				    success : function(resp) {
						console.log(resp);
				    }
				});
				break;
			case "5":
				$.ajax({
				    url : 'http://localhost:8888/mybatis/ScriptServlet',
				    type : 'get',
				    data : {
					    name : 'test 8888,jsonp'
				    },
				    dataType : 'jsonp',
				    jsonp:'othercallback', //指定参数名称，即callback改为othercallback，所以后台获取相应也要改为request.getParameter("othercallback")
				    jsonpCallback:'othername', //指定回调函数名称
				    success : function(resp) {
						console.log("ajax:"+resp);
				    }
				});
				break;
            case "6":
				$.getJSON("http://localhost:8888/mybatis/ScriptServlet?name=getJSON&othercallback=?",function(resp){
					console.log(resp);
				});
			default:
				break;
			}
		});
	});
	
	function othername(resp){
	    console.log("othername:"+resp);
	}
 
	function testscript(resp) {
		console.log(resp);
	}
</script>
<body>
	<a href="javascript:void(0)" id="1">访问本homeservlet</a>
	<br />
	<a href="javascript:void(0)" id="2">访问8888 homeservlet</a>
	<br />
	<br />
 
	<a href="javascript:void(0)" id="3">动态创建script</a>
	<br>
	<a href="javascript:void(0)" id="4">jquery跨域请求</a>
	<br>
	<a href="javascript:void(0)" id="5">jquery跨域请求(自定义callback)</a>
	<br>
    <a href="javascript:void(0)" id="6">getJSON</a>
	<br>
</body>
</html>

五、JSONP主要弊端，缺陷

1、不支持post方式，即使在ajax中改成post，实际也是get方法

将以上ajax中的get改成post：

$.ajax({
    url : 'http://localhost:8888/mybatis/ScriptServlet',
    type : 'post',
    data : {
	    name : 'test 8888,jsonp'
    },
    dataType : 'jsonp',
//      jsonp:'othercallback', //指定参数名称，即callback改为othercallback，所以后台获取相应也要改为request.getParameter("othercallback")
//      jsonpCallback:'othername', //指定回调函数名称
    success : function(resp) {
		console.log(resp);
    }
});

看起来请求成功了，但是实际最终还是get请求，

 因为jsonp是通过动态创建script，而动态生成script的src只能用get。

2、JSONP是一种脚本注入，存在一定的安全隐患。

  安全问题可以参考：https://blog.csdn.net/u014021893/article/details/72303110
 

结果才重要
关注
专栏目录
jsonp解决跨域问题
qq383264679的专栏
03-11 1477
解决的场景(如下图所示)： 当使用ajax的方式远程访问服务端的资源时候，会出现跨域问题。 跨域产生的原因：        跨域问题的产生是浏览器一段的，服务器是不存在跨域问题这一说的。跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。一个网站的网址组成包括协议名，子域名，主域名，端口号。比如 https://github.c
前端大厂最新面试题-cors.docx
06-06
1. **JSONP(JSON with Padding)**：JSONP是一种早期的跨域解决方案，通过动态创建`<script>`标签并指定其`src`属性来实现跨域请求。服务端提供一个可接受参数的JavaScript函数，前端通过指定回调函数名来获取数据。...
JSONP解决跨域问题
10-16
前端使用jquery，datatype采用jsonp，服务端采用C#编写的webService
JSONP ———— 跨域解决方案之一
nainaiqiuwencun的博客
10-01 653
前言：在实际的开发应用过程中，很有可能需要获取另外一个服务器上的资源，如果两个服务器的域名、端口、协议等不同，就存在跨域问题。   一、什么是跨域？ 简单的来讲就是浏览器不能执行其他网站的脚本，主要原因在于浏览器的同源策略。而同源策略又分成： 1.DOM同源策略 2.XMLHttpRequest同源策略 这里主要讲的是如何解决XMLHttpRequest同源策略。 比如有两个服务器，...
前端开发攻略---彻底弄懂跨域&解决方案
最新发布
nibabaoo的博客
08-14 1365
（跨域资源共享），是用于控制浏览器校验跨域请求的一套规范，服务器依照CORS规范，添加特定响应头服务器明确表示拒绝跨域请求，或没有表示，则浏览器校验不通过服务器明确表示允许跨域请求，则浏览器校验通过备注：使用CORS解决跨域是最正统的方式，且要求服务器是“自己人”
使用JSONP解决跨域
热门推荐
daisy
05-16 1万+
1.首先需要知道什么是跨域 浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 出于浏览器的同源策略限制 同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响 *同源策略限制内容有： Cookie、LocalStorage、IndexedDB 等存储性内容 DOM 节点 AJAX 请求发送后，结果被浏览器拦截了 2.什么是JSONP？ JSONP是JSON with P
前端大厂最新面试题-2020转转前端社招面经.docx
06-06
13. 跨域解决方案 跨域是指浏览器的同源策略限制下的资源访问问题。可以使用 JSONP、CORS、proxy 等方式来解决跨域问题。 14. Vue 双向数据绑定原理 Vue 的双向数据绑定是指视图层和数据层之间的绑定关系。可以...
前端大厂最新面试题-美图2018秋招前端测试题.docx
06-06
前端大厂最新面试题-美图2018秋招前端测试题.docx 本资源为美图公司2018秋招...本资源涵盖了前端工程师所需的多方面知识点，如CSS单位、JavaScript执行顺序、数组方法、跨域解决方案、ES6新特性、前端性能优化方法等。
前端大厂最新面试题-2019搜狐前端社招面经.docx
06-06
常见的解决方案包括 JSONP、CORS、postMessage 等。JSONP 通过 script 标签请求数据，服务端返回的结果是一个函数调用，函数名是 callback 函数。 3. HTTP 请求头和响应头：HTTP 请求头和响应头是 HTTP 协议中的一...
前端大厂最新面试题-baidu.docx
06-06
3. Promise 的实现：Promise 是一种异步编程的解决方案，允许开发者在异步操作完成时执行回调函数。 4. 浏览器事件循环：浏览器事件循环是指浏览器中异步事件的处理机制，包括宏任务和微任务两种类型。 三、高级 ...
JSONP解决跨域
qq_63479468的博客
05-06 1804
一、同源政策 1.什么是同源 如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不同，就是不同源 2.同源政策的目的 同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的Cookie，B网站是不能访问的 随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错。 ...
19-封装一个jsonp
梦格的博客
09-27 129
function jsonp(options) { // 创建script标签 var script = document.createElement("script"); // 生成随机回调函数名 var fnName = "jsonp" + Math.random().toString().replace(".", "") + new Date().getTime(); // 为全局作用域下添加一个属性 属性的名字就是我们随机生成的函数名 // 让属性的值指向调用json
Jsonp解决跨域
happy0012002的专栏
05-25 1708
查阅网上解决跨域的方式，主要有以下几种 1、使用jsonp方式 jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。 1.1第一版： 后端，采用nginx字节返回固定对象 location /test1 { default_type ...
jsonp前后端交互（解决跨域问题）
dijuan4923的博客
09-10 222
目标 -掌握jsonp的原理 -会搭建node服务器创建jsonp接口 -学会封装jsonp -学会jsonp的实际运用 知识要点 -跨域解决 -jsonp原理及封装 -jsonp服务器搭建 -jsonp实际运用 ajax问题 -浏览器同源策略 -同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，...
前端面试精华：AJAX原理与JSONP解决跨域策略
AJAX和JSONP就是跨域问题的常见解决方案，而同源策略是浏览器安全机制的一部分，开发者需要理解和应对。 4. 前端优化 前端优化主要包括性能优化、代码结构优化、资源加载优化和用户体验优化。这可能包括减少HTTP...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结果才重要

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值