同源政策

最新推荐文章于 2024-07-25 12:41:07 发布

一麻袋小猫

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量165

点赞数

分类专栏： Ajax 同源政策解决方法文章标签： ajax

本文链接：https://blog.csdn.net/Zmongo/article/details/105392317

版权

Ajax 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

同源政策解决方法

3 篇文章 0 订阅

订阅专栏

Ajax请求限制

在这里插入图片描述

什么是同源

如果两个页面拥有相同的协议，域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
在这里插入图片描述

同源政策的目的

同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的Cookie，B网站是不能访问的。
在这里插入图片描述

使用JSONP解决同源限制问题(利用script标签可以向非同源服务器端发送请求的特性)

jsonp是json with padding的缩写，它不属于Ajax的请求，但它可以模拟Ajax请求
在这里插入图片描述

封装jsonp方法并对服务器端可客户端已经优化

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">点我发送请求</button>
	<script>
		//这个完成响应内容
		//这个函数被调用
		// function fn1 (data) {
		// 	console.log('客户端的fn函数被调用')
		// 	console.log(data);
		// }
	</script>
	<!-- 将非同源服务器端的请求地址写在script标签中 -->
	<!-- <script src="http://localhost:3001/test"></script> -->
	<script>
		//获取按钮
		var btn = document.getElementById('btn');
		//为按钮添加点击事件
		btn.onclick = function () {
			jsonp({
			//请求地址
			url:'http://localhost:3001/better',
			data: {
				name: 'lisi',
				age: 30
			},
			success: function (data) {
				console.log(123);
				console.log(data);
			}
		})
		}
		function jsonp (options) {
			//动态创建script标签
			var script = document.createElement('script');
			//拼接字符串的变量
			var params = '';

			for (var attr in options.data) {
				params += '&' + attr + '=' + options.data[attr];
			}

			//为了防止函数被覆盖掉，所以需要随机生成不一样的函数名字
			//产生随机小数
			//myJsonp0123
			var fnName = 'myJsonp'+ Math.random().toString().replace('.','');
			// 它已经不是一个全局函数
			// 需要把它变成全局函数
			// 把它挂载到window下面的属性下面
			//  . 后面不能跟变量 需要换成 []
			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);
			}
		}
		
	</script>
</body>
</html>

app.js服务器端

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));

app.get('/test', (req, res) => {
	//外面是单引号，里面是双引号
	//在服务器端调用函数
	const result = 'fn({name: "张三"})';
	res.send(result);
});
app.get('/better', (req, res) => {
	//接收客户端传递过来的函数的名称
	// const fnName = req.query.callback;
	//外面是单引号，里面是双引号
	//在服务器端调用函数
	//将函数名称对应的函数调用代码返回给客户端
	// const result = fnName + '({name: "张三"})';
	// res.send(result);
	
	//jsonp方法的内部 做的就是上面的注释的代码部分
	res.jsonp({name: 'lisi', age: 20})
});

app.listen(3001);
console.log('服务器启动成功');