AJAX 解决跨域问题

最新推荐文章于 2024-03-18 18:19:56 发布

玳宸

最新推荐文章于 2024-03-18 18:19:56 发布

阅读量250

点赞数

分类专栏： # AJAX

本文链接：https://blog.csdn.net/zeroheitao/article/details/116378119

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1、同源策略

同源策略(Same-Origin Policy) 最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号必须完全相同。

违背同源策略就是跨域。

2、解决跨域

2.1、JSONP

JSONP(JSONwithPadding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。
在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。
JSONP 的使用

1.动态的创建一个 script 标签 
varscript=document.createElement("script"); 

2.设置 script 的 src，设置回调函数 
script.src="http://localhost:3000/testAJAX?callback=abc"; 
functionabc(data){ 
	alert(data.name); 
}; 

3.将 script 添加到 body 中 
document.body.appendChild(script); 

4.服务器中路由的处理 
router.get("/testAJAX",function(req,res){ 
	console.log("收到请求"); 
	varcallback=req.query.callback; 
	varobj={
		name:"孙悟空", 
		age:18
	} 
	res.send(callback+"("+JSON.stringify(obj)+")");
});

jQuery 中的 JSONP

<!DOCTYPEhtml> 
<htmllang="en"> 
<head> 
	<metacharset="UTF-8"> 
	<title>Title</title> 
</head> 
<body> 
	<button id="btn">按钮</button> 
	<ul id="list"></ul> 
	<script type="text/javascript" src="./jquery-1.12.3.js"></script> 
	<script type="text/javascript"> 
		window.onload=function(){ 
			var btn = document.getElementById('btn') 
			btn.onclick=function(){
				$.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",function (data){ 
					console.log(data); // 获 取 所 有 的 电 影 的 条 目 varsubjects=data.subjects; // 遍 历 电 影 条 目
					for(var i=0; i<subjects.length; i++){ 
						$("#list").append("<li>"+ subjects[i].title+"<br/>"+ "<imgsrc=\""+subjects[i].images.large+"\">"+ "</li>"); 
					}
				});
			}
		} 
	</script> 
</body> 
</html>

2.2、CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

CORS（Cross-OriginResourceSharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
CORS 的使用
主要是服务器端的设置：

router.get("/testAJAX",function(req,res){
	//通过 res 来设置响应头，来允许跨域请求 
	//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000"); 
	res.set("Access-Control-Allow-Origin","*"); 
	res.send("testAJAX 返回的响应");
});

玳宸

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX 解决跨域问题

文章目录1、同源策略2、解决跨域2.1、JSONP2.2、CORS1、同源策略同源策略(Same-Origin Policy) 最早由 Netscape 公司提出，是浏览器的一种安全策略。同源：协议、域名、端口号必须完全相同。违背同源策略就是跨域。2、解决跨域2.1、JSONPJSONP(JSONwithPadding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。在网页有一些标签天生具有跨域能力，比如：img link iframe scrip
复制链接

扫一扫