解决同源政策问题的第二，三种方法

最新推荐文章于 2022-03-27 13:30:12 发布

一麻袋小猫

最新推荐文章于 2022-03-27 13:30:12 发布

阅读量278

点赞数

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

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

版权

Ajax 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

同源政策解决方法

3 篇文章 0 订阅

订阅专栏

CORS

Jsonp绕过了同源限制，发送的不是Ajax请求。
CORS全称为Cross-originresource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送Ajax请求，客服了Ajax只能同源使用的限制。
在这里插入图片描述

app.get('/cross', (req, res) => {
	//允许哪些客户端访问我
	//都是在请求头中设置
	//* 代表允许所有客户端访问我
	res.header('Access-Control-Allow-Origin', '*');
	//允许客户端使用哪些请求方法访问我
	res.header('Access-Control-Allow-Methods', 'get, post');
	res.send('ok');
})

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">点我发送请求</button>
	<script src="/js/ajax.js"></script>
	<script>
		var btn = document.getElementById('btn');
		//为按钮添加点击事件
		btn.onclick = function () {
			ajax({
				type: 'get',
				url: 'http://localhost:3001/cross',
				success: function (data) {
					console.log(data);
				}
			})
		};
	</script>
</body>
</html>

一般这种方法，都放在服务器端的最上面。先用中间件拦截所有请求。

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

访问非同源数据，服务器端解决方案（绕过了同源限制）

同源政策是浏览器给予Ajax技术的限制，服务器端是不存在同源政策限制。
在这里插入图片描述
第三方模块： request

一号网站客户端：

<button id="btn">点我发送请求</button>
	<script src="/js/ajax.js"></script>
	<script>
		var btn = document.getElementById('btn');
		//为按钮添加点击事件
		btn.onclick = function () {
			ajax({
				type: 'get',
				url: 'http://localhost:3000/server',
				success: function (data) {
					console.log(data);
				}
			})
		};
	</script>

一号网站服务器端：

//向其他服务器端请求数据的模块
const request = require('request');
app.get('/server', (req, res) => {
	request('http://localhost:3001/better', (err, response, body) => {
		res.send('body');
	})

二号网站服务器端：

app.get('/better', (req, res) => {
	res.send('ok');
});

一麻袋小猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录