JSONP ———— 跨域解决方案之一

最新推荐文章于 2024-06-20 20:55:24 发布
最新推荐文章于 2024-06-20 20:55:24 发布
阅读量635 收藏 3
点赞数 1
分类专栏： HTTP Ajax 文章标签： 跨域 JSONP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nainaiqiuwencun/article/details/82907210
版权
HTTP 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
Ajax
1 篇文章 0 订阅
订阅专栏

前言：在实际的开发应用过程中，很有可能需要获取另外一个服务器上的资源，如果两个服务器的域名、端口、协议等不同，就存在跨域问题。

 

一、什么是跨域？

简单的来讲就是浏览器不能执行其他网站的脚本，主要原因在于浏览器的同源策略。而同源策略又分成：

1.DOM同源策略

2.XMLHttpRequest同源策略

这里主要讲的是如何解决XMLHttpRequest同源策略。

比如有两个服务器，分别是A服务器(www.servicea.com)和B服务器(www.serviceb.com)，A服务器向B服务器发起一个ajax请求，这时候就会产生跨域问题。

 

二、哪些情况存在跨域问题？

当端口、协议、域名（即使与域名对应的ip）等任意一个不同，就构成跨域。

链接说明同源检测

http://www.servicea.com/first.do

http://www.servicea.com:8080/first.do

端口不同跨域

http://www.servicea.com/first.do

https://www.servicea.com/first.do

协议不同跨域

http://www.servicea.com/first.do

http://www.serviceb.com/first.do

域名不同跨域

http://www.servicea.com/first.do

http://10.28.10.13/first.do

域名和其对应的ip跨域

http://www.servicea.com/first.do

http://img.servicea.com/first.do

子域不同跨域

http://www.servicea.com/first.do

http://www.servicea.com/second.do

同域名不同方法不跨域

http://www.servicea.com/first.do

http://www.servicea.com/web/first.do

同域名不同文件夹不跨域
   

三、什么是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+"\")");
}

结果：可以访问

返回web后先执行了othername函数，最后执行success。

 

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

奈奈求温存
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsonp解决跨域问题
qq383264679的专栏
03-11 1472
解决的场景(如下图所示)： 当使用ajax的方式远程访问服务端的资源时候，会出现跨域问题。 跨域产生的原因：        跨域问题的产生是浏览器一段的，服务器是不存在跨域问题这一说的。跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。一个网站的网址组成包括协议名，子域名，主域名，端口号。比如 https://github.c
跨域解决方案Jsonp原理解析
10-15
然而，随着Web应用的发展，跨域数据交换的需求日益增长，这就催生了Jsonp（JSON with Padding）这一跨域解决方案。 ## 1. 什么是Jsonp？ Jsonp是一种绕过同源策略的技术，它允许网页从其他域名获取数据。Jsonp的...
JSONP解决跨域问题
10-16
前端使用jquery，datatype采用jsonp，服务端采用C#编写的webService
使用JSONP解决跨域
热门推荐
daisy
05-16 1万+
1.首先需要知道什么是跨域 浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 出于浏览器的同源策略限制 同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响 *同源策略限制内容有： Cookie、LocalStorage、IndexedDB 等存储性内容 DOM 节点 AJAX 请求发送后，结果被浏览器拦截了 2.什么是JSONP？ JSONP是JSON with P
跨域数据请求技术JSONP详解
最新发布
繁依Fanyi的博客
06-20 1409
当谈到 JSONP，就像是在谈论你在一场派对上认识的新朋友一样。让我们从头开始介绍。JSONP，简称 JSON with Padding，是一种利用标签进行跨域数据请求的技术。它允许你在网页中请求来自其他域的数据，而无需担心浏览器的同源策略（Same-Origin Policy）带来的限制。以一个简单的比喻来说，就像你在一家餐馆点菜一样。你可以在自己家里使用电话点餐，然后等着外卖送达，而不需要亲自去餐馆。JSONP允许你在当前页面中加载其他网站的数据，就像是通过电话点餐一样轻松。
PHP下ajax跨域的解决方案之window.name实例分析
10-15
这种方式虽然相对简单，但并非适用于所有场景，因此在实际开发中，还需要根据项目需求和浏览器兼容性来选择最合适的跨域解决方案。例如，还可以使用CORS（Cross-Origin Resource Sharing）或者JSONP（JSON with ...
跨域解决方案整理笔记.docx
10-26
跨域解决方案是对Web开发中遇到的一个重要问题的回应，源于浏览器的安全策略——同源策略。同源策略限制了从一个域名、协议或端口访问另一个域名、协议或端口的资源，以保护用户数据不被恶意网站窃取。在开发过程中...
学习总结：前端跨域请求的解决办法——JSONP
03-24
为了解决这个问题，开发者们发明了各种跨域解决方案，其中JSONP（JSON with Padding）是一种广泛使用的非官方标准。本文将深入探讨JSONP的工作原理以及如何在实际项目中应用。 ### JSONP简介 JSONP全称是"JSON ...
10种跨域解决方案.docx
10-26
### 10种跨域解决方案概述 #### 一、跨域是什么？ **1....跨域问题的根本原因在于浏览器实施的一种安全...随着项目的复杂度增加和技术栈的变化，灵活运用各种跨域解决方案将成为提升项目质量和用户体验的关键因素之一。
19-封装一个jsonp
梦格的博客
09-27 121
function jsonp(options) { // 创建script标签 var script = document.createElement("script"); // 生成随机回调函数名 var fnName = "jsonp" + Math.random().toString().replace(".", "") + new Date().getTime(); // 为全局作用域下添加一个属性 属性的名字就是我们随机生成的函数名 // 让属性的值指向调用json
JSONP解决跨域
qq_63479468的博客
05-06 1788
一、同源政策 1.什么是同源 如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不同，就是不同源 2.同源政策的目的 同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的Cookie，B网站是不能访问的 随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错。 ...
Jsonp解决跨域
happy0012002的专栏
05-25 1692
查阅网上解决跨域的方式，主要有以下几种 1、使用jsonp方式 jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。 1.1第一版： 后端，采用nginx字节返回固定对象 location /test1 { default_type ...
jsonp前后端交互（解决跨域问题）
dijuan4923的博客
09-10 215
目标 -掌握jsonp的原理 -会搭建node服务器创建jsonp接口 -学会封装jsonp -学会jsonp的实际运用 知识要点 -跨域解决 -jsonp原理及封装 -jsonp服务器搭建 -jsonp实际运用 ajax问题 -浏览器同源策略 -同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，...
Ajax跨域解决方案：JSONP、CORS与代理请求
JSONP是一种早期的跨域解决方案，适用于支持GET请求的API。它是通过动态插入`<script>`标签来实现的，因为`<script>`标签不受同源策略限制。服务端提供一个可被调用的JavaScript函数，前端通过指定该函数名作为回调...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值