同源政策：CORS跨域资源共享

最新推荐文章于 2023-08-25 00:00:17 发布

云兮书嗣

最新推荐文章于 2023-08-25 00:00:17 发布

阅读量199

点赞数

分类专栏： Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/m0_37985967/article/details/115620319

版权

Ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

cors跨域资源共享

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

一旦涉及到跨域访问，cookie就不会随着请求被发送到服务端。

想要实现跨域登录，就要发送cookie，但是跨域访问是不能携带cookie的，怎么解决这个问题

withCredentials属性

withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false

如果要跨域，需要将这个值设置为true

客户端：

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();
});

app.post('/login',(req,res) => {
	//创建表单解析对象
	var form = formidable.IncomingForm();
	//解析表单
	form.parse(req, (err, fields, file) => {
		//接收客户端传递过来的用户名和mima
		const { username, password } = fields;
				// 用户名密码比对
				if (username == 'itheima' && password == '123456') {
					// 设置session
					req.session.isLogin = true;
					res.send({message: '登录成功'});
				} else {
					res.send({message: '登录失败, 用户名或密码错误'});
				}
	})
});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实现跨域功能</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
	<style type="text/css">
		.container {
			padding-top: 60px;
		}
	</style>
</head>
<body>
	<div class="container">
		<form id="loginForm">
			<div class="form-group">
				<label>用户名</label>
				<input type="text" name="username" class="form-control" placeholder="请输入用户名">
			</div>
			<div class="form-group">
				<label>密码</label>
				<input type="password" name="password" class="form-control" placeholder="请输入用密码">
			</div>
			<input type="button" class="btn btn-default" value="登录" id="loginBtn">
			<input type="button" class="btn btn-default" value="检测用户登录状态" id="checkLogin">
		</form>
	</div>
	<script type="text/javascript">
		// 获取登录按钮
		var loginBtn = document.getElementById('loginBtn');
		// 获取检测登录状态按钮
		var checkLogin = document.getElementById('checkLogin');
		// 获取登录表单
		var loginForm = document.getElementById('loginForm');
		// 为登录按钮添加点击事件
		loginBtn.onclick = function () {
			// 将html表单转换为formData表单对象
			var formData = new FormData(loginForm);
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			xhr.open('post', 'http://localhost:3001/login');
			// 当发送跨域请求时，携带cookie信息
			xhr.withCredentials = true;
			// 发送请求并传递请求参数
			xhr.send(formData);
			// 监听服务器端给予的响应内容
			xhr.onload = function () {
				console.log(xhr.responseText);
			}
		}

		// 当检测用户状态按钮被点击时
		checkLogin.onclick = function () {
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			xhr.open('get', 'http://localhost:3001/checkLogin');
			// 当发送跨域请求时，携带cookie信息
			xhr.withCredentials = true;
			// 发送请求并传递请求参数
			xhr.send();
			// 监听服务器端给予的响应内容
			xhr.onload = function () {
				console.log(xhr.responseText);
			}
		}
	</script>
</body>
</html>

云兮书嗣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
同源政策：CORS跨域资源共享

cors跨域资源共享CORS: 全称： Cross-origin resource sharing ,即跨域资源共享，它允许浏览器向跨域服务器发送Ajax请求，客服了Ajax只能同源的限制。一旦涉及到跨域访问，cookie就不会随着请求被发送到服务端。想要实现跨域登录，就要发送cookie，但是跨域访问是不能携带cookie的，怎么解决这个问题withCredentials属性withCredentials：指定在涉及到跨域请求时，是否携带cookie信息，默认值为false如
复制链接

扫一扫

专栏目录