Ajax跨域登录功能案例

最新推荐文章于 2022-04-01 19:38:41 发布

编码要得劲

最新推荐文章于 2022-04-01 19:38:41 发布

阅读量632

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_41189709/article/details/100044337

版权

本文介绍了使用Ajax实现跨域登录功能的案例。在客户端，跨域请求时携带cookie信息向非同源服务器发送登录请求；服务器端则需配置允许跨域，并验证用户名和密码，验证通过后将登录状态存入session，以便后续请求检查。

摘要由CSDN通过智能技术生成

1，在客户端向非同源的服务器端发出登录请求，在发送跨域请求时，需要携带cookie信息
2，服务器端设置允许跨域请求，服务器端进行用户名密码验证，验证成功还需要将登录状态保存到session中，这样客户端每次的请求如果需要进行登录才能操作的话就可以先进性查看在做处理的
客户端代码

		// 获取登录按钮
		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.on