Ajax同源政策--学习

最新推荐文章于 2024-04-05 02:37:50 发布
最新推荐文章于 2024-04-05 02:37:50 发布
阅读量327 收藏
点赞数
分类专栏： 笔记 文章标签： ajax jsonp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43482965/article/details/105258351
版权

文章目录

一、Ajax请求限制

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

二、什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
如:http://www.example.com/dir/page.html
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）

三、同源政策的目的

  • 同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。
  • 随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。

四、使用 JSONP 解决同源限制问题

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

4.1 JSONP使用步骤

  1. 将不同源的服务器端请求地址写在 script 标签的 src 属性中
 <script src="www.example.com"></script>
<script src=“https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>//引用jquery
  1. 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。
 const data = 'fn({name: "张三", age: "20"})';
 res.send(data);
  1. 在客户端全局作用域下定义函数 fn
function fn (data) { }
  1. 在 fn 函数内部对服务器端返回的数据进行处理
 function fn (data) { console.log(data); }

例如localhost:3000服务器访问localhost:001
html部分：

<body>
//方法一：服务器端要写跟客户端一样的函数名
	<script>
		function fn2 (data) {
			console.log('客户端的fn函数被调用了')
			console.log(data);  //{name: "张三"}
		}
	</script>
	<!-- 1.将非同源服务器端的请求地址写在script标签的src属性中 -->
	<script src="http://localhost:3001/better?callback=fn2"></script>

//方法二：函数名用参数方式传递，服务器端就不用写函数名了
<script>
		function fn2 (data) {
			console.log('客户端的fn函数被调用了')
			console.log(data);
		}
	</script>
	<!-- 1.将非同源服务器端的请求地址写在script标签的src属性中 -->
	<script src="http://localhost:3001/better?callback=fn2"></script>
</body>

在localhost:3001服务器app.js中

//方法一
app.get('/test', (req, res) => {
	const result = 'fn({name: "张三"})';
	res.send(result);
});

//方法二
app.get('/better', (req, res) => {
	// 接收客户端传递过来的函数的名称
	const fnName = req.query.callback;
	// 将函数名称对应的函数调用代码返回给客户端
	const data = JSON.stringify({name: "张三"});
	const result = fnName + '('+ data +')';
	 	res.send(result);	
});

4.2 JSONP 代码优化

4.2.1 将 script 请求的发送变成动态请求。

讲请求后的script标签删除。
为script标签添加onload事件，加载完成事件。

<body>
	<button id="btn">点我发送请求</button>
	<script>
		function fn2 (data) {
			console.log('客户端的fn函数被调用了')
			console.log(data);
		}
	</script>
	<script type="text/javascript">
		// 获取按钮
		var btn = document.getElementById('btn');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 创建script标签
			var script = document.createElement('script');
			// 设置src属性
			script.src = 'http://localhost:3001/better?callback=fn2';
			// 将script标签追加到页面中
			document.body.appendChild(script);
			// 为script标签添加onload事件
			script.onload = function () {
				// 将body中的script标签删除掉
				document.body.removeChild(script);
			}
		}
	</script>
</body>

4.2.2 封装 jsonp 函数，方便请求发送。

封装jsonp函数：

function jsonp (options) {
			// 动态创建script标签
			var script = document.createElement('script');
			// 拼接字符串的变量
			var params = '';

			for (var attr in options.data) {
				params += '&' + attr + '=' + options.data[attr];
			}
			
			// myJsonp0124741   因为 Math.random()的0-1的小数，我们要将小数点替换掉
			var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
			// 它已经不是一个全局函数了
			// 我们要想办法将它变成全局函数
			window[fnName] = options.success;
			// 为script标签添加src属性
			script.src = options.url + '?callback=' + fnName + params;
			// 将script标签追加到页面中
			document.body.appendChild(script);
			// 为script标签添加onload事件
			script.onload = function () {
				document.body.removeChild(script);
			}
		}

调用：

		var btn1 = document.getElementById('btn1');
		var btn2 = document.getElementById('btn2');
		// 为按钮添加点击事件
		btn1.onclick = function () {
			jsonp({
				// 请求地址
				url: 'http://localhost:3001/better',
				data: {
					name: 'lisi',
					age: 30
				},
				success: function (data) {
					console.log(123)
					console.log(data)
				}
			})
		}

		btn2.onclick = function () {
			jsonp({
				// 请求地址
				url: 'http://localhost:3001/better',
				success: function (data) {
					console.log(456789)
					console.log(data)
				}
			})
		}

4.2.3 服务器端代码优化之 res.jsonp 方法

在服务器使用res.jsonp方法简化代码。

app.get('/better', (req, res) => {
	res.jsonp({name: 'lisi'});
	
//-------------------等价于------------------
	// 接收客户端传递过来的函数的名称
	const fnName = req.query.callback;
	// 将函数名称对应的函数调用代码返回给客户端
	const data = JSON.stringify({name: "张三"});
	const result = fnName + '('+ data +')';
	 	res.send(result);	

});

五、CORS 跨域资源共享

CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

在这里插入图片描述

	origin: http://localhost:3000
	
	Access-Control-Allow-Origin: 'http://localhost:3000'
 	Access-Control-Allow-Origin: '*'

5.1 使用步骤

在服务器端，使用中间件，允许某些客户端访问，访问方式

//拦截所有请求
app.use((req, res, next) => {
	// 1.允许哪些客户端访问我
	// * 代表允许所有的客户端访问我
	res.header('Access-Control-Allow-Origin', '*')
	// 2.允许客户端使用哪些请求方法访问我
	res.header('Access-Control-Allow-Methods', 'get,post')
	next();
});

5.2访问非同源数据 服务器端解决方案

因为同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制。

在这里插入图片描述
例如在localhost：3000浏览器端请求localhost:3001

  • 在localhost：3000服务器端
app.get('/server', (req, res) => {
	//在服务器端请求localhost:3001
	request('http://localhost:3001/cross', (err, response, body) => {
		res.send(body);
	})
});
  • 在localhost:3001服务器端
app.get('/cross', (req, res) => {
	res.send('ok')
});

5.3 withCredentials属性

在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。
在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。
Access-Control-Allow-Credentials：true 允许客户端发送请求时携带cookie

// 拦截所有请求
app.use((req, res, next) => {
	// 1.允许哪些客户端访问我
	// * 代表允许所有的客户端访问我
	// 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息
	res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
	// 2.允许客户端使用哪些请求方法访问我
	res.header('Access-Control-Allow-Methods', 'get,post')
	// 允许客户端发送跨域请求时携带cookie信息
	res.header('Access-Control-Allow-Credentials', true);
	next();
});
hn_lgf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Ajax资料之同源政策
宅羽的博客
01-07 113
◆ Ajax请求限制： Ajax只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML文件只能向A网站服务器中发送Ajax请求，B网站中的HTML文件只能向B网站中发送Ajax请求，但是A网站是不能向 B 网站发送 Ajax请求的，同理，B网站也不能向A网站发送Ajax请求。 ◆ 同源的概念： 如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中...
Ajax使用jsonp解决跨域实例，简单聊聊2024年Python开发的现状和思考
m0_61369275的博客
03-27 677
不知道你们用的什么环境，我一般都是用的Python3.6环境和pycharm解释器，没有软件，或者没有资料，没人解答问题，都可以免费领取（包括今天的代码），过几天我还会做个视频教程出来，有需要也可以领取~给大家准备的学习资料包括但不限于：Python 环境、pycharm编辑器/永久激活/翻译插件python 零基础视频教程Python 界面开发实战教程Python 爬虫实战教程Python 数据分析实战教程python 游戏开发实战教程Python 电子书100本。
使用Ajax发起JSONP请求
qq_43808342的博客
12-18 1914
对基于Ajax发起的JSONP请求做了一个简单的总结
Ajax中的JSONP
weixin_46048542的博客
08-04 2086
如果两个页面的。
Ajax(七)+axios+跨域+JSONP
Bella.的博客
12-19 1639
目录 1. XMLHttpRequest Level2的新特性——FormData对象管理表单数据（一） 用法（二） 2. XMLHttpRequest Level2的新特性——上传文件 3. XMLHttpRequest Level2的新特性——显示文件上传进度 4. jQuery高级用法 4.1 jQuery实现文件上传 4.2 jQuery实现loading效果 5. axios 5.1 什么是axios 5.2 axios发起GET请求 5.3 axios发起POST
Ajax基础：发送jsonp请求（jsonp、jsonCallback）
热门推荐
昔冰_G的博客
10-01 1万+
jsonp走的是get请求方式，也就是ajax的默认请求方式； ajax方法中也涵盖了jsonp请求，可以通过ajax方法来发送jsonp请求； <!--客户端代码--> <body> <button id="btn">发送jsonp请求</button> <script src="js/jquery-3.5.1.min.js"></script> <script> $('#bt
ajax的jsonp原理,JSONP原理及实现
weixin_35763055的博客
08-05 598
基本原理基本原理： 主要就是利用了 script 标签的src没有跨域限制来完成的。执行过程执行过程：前端定义一个解析函数(如: jsonpCallback = function (res) {})通过params的形式包装script标签的请求参数，并且声明执行函数(如cb=jsonpCallback)后端获取到前端声明的执行函数(jsonpCallback)，并以带上参数且调用执行函数的方式传...
ajax的学习 - 图灵机器人
01-30
ajax的学习 - 图灵机器人
uni-ajax：uni-app的轻量级HTTP客户端
02-04
NPM # 如果您的项目是HBuilder X创建的，根目录又没有package.json文件的话，请先执行如下命令：# npm init -y# 安装npm install uni-ajax# 更新npm update uni-ajax :croissant:实例新建ajax.js文件（文件名可...
Ajax 设置Access-Control-Allow-Origin实现跨域访问
10-20
主要介绍了Ajax 设置Access-Control-Allow-Origin实现跨域访问,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Ajax-ajax-contact-form-wordpress.zip
09-17
Ajax-ajax-contact-form-wordpress.zip,wordpress的联系人表单,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载...
php ajax 域名查询-domainsearch
03-26
php ajax 域名查询_domainsearchphp ajax 域名查询_domainsearchphp ajax 域名查询_domainsearchphp ajax 域名查询_domainsearchphp ajax 域名查询_domainsearchphp ajax 域名查询_domainsearchphp ajax 域名查询_...
Ajax 使用 原理 跨域 JSONP
aricsya的博客
09-01 133
另外一个解决该问题的办法就是JSONP，在HTML标记语言中又许多的标签都包含跨域的特性例如当我们使用script标签引用外部js时，我们需要从某些网址引入，而我们本身的文件遵循的是file协议，引入的文件遵循的是http协议，这里就发生了跨域，但我们在使用这些引入的文件时并没有报跨域错误，JSOP解决跨域问题使用的就是这个原理，在这里我就不进行更多的赘述了。用户在间隔很短的时间内多次重复的进行相同的请求，这时服务器还没来得及进行反应，那么就会给服务器造成很大的负担，这是一个很严重的问题。
Ajax跨域请求之同源政策、跨域请求 & 实现跨域请求之jsonp原理、jQuery实现跨域请求、CORS跨域 & XML格式-过时 & ajax请求遵循http协议
weixin_44867717的博客
04-19 542
axios
关于ajax的jsonp详解
04-10 549
文字版https://blog.csdn.net/weixin_44867717/article/details/111465582 视频版本JSONP处理非同源_哔哩哔哩_bilibili 其中视频版可以只看 P2--了解jsonp的原理 P4--ajax中jsonp的使用，callback参数，_参数 不用看 P1--什么是同源和非同源（协议、域名、端口三者是否相同） ...
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
春风若有怜花意，可否许我再少年
11-18 297
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
ajax跨域解决方案：jsonp方式
menghuannvxia的专栏
09-18 309
jsonp 只支持get请求不支持post请求 用法说明： ①dataType改为jsonp ②jsonp : "jsonpCallback"————发送到后端实际为http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx ③后端获取get请求中的jsonpCallback ④构造回调结构 前端 $.ajax({ type : "GET", async : false, url :...
Ajax和Jsonp
kuaimeidong的博客
01-08 134
jsonp jsonp是用来解决Ajax直接请求普通文件存在跨域无权限访问的问题的，jsonp（json Protocol）该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。 ajax和jsonp的区别 1、ajax和jsonp的调用方式很像，目的...
【转载】ajax跨域及解决方案（jsonp、cors），面试心得体会
最新发布
m0_75280563的博客
04-05 343
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载码获取！！（备注：前端）**分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载。
完整word版-ASP.NET和AJAX简洁教程.doc
11-13
通过本文的学习，读者可以掌握ASP.NET和AJAX技术在网站开发中的应用方法，了解如何使用ASP.NET AJAX调用ASP.NET web services，以及如何利用Web Service实现数据传输和客户端/服务器端之间的通信。同时，读者还可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值