node.js第三天-----ajax（3）_node.js渲染会用到ajax么-CSDN博客

本文链接：https://blog.csdn.net/ab15176142633/article/details/103848584

CORS跨域请求

CORS是W3C推出的一种新的机制，即跨资源共享（Cross-Origin Resource Sharing）。这种机制允许浏览器向跨源服务器发出XMLHTTPRequest请求，它基于浏览器的一个内置机制需要浏览器的支持。

简单请求必须满足：1.请求方式为get，post，head 2.数据类型Content-Type只能是application/x-www-form-rulencoded、mulitipart/form-data或text/plain中的一种

简单请求

//客户端
<!DOCTYPE html>
<html>
<head>
	<title>cors</title>
	<meta charset="utf-8">
</head>
<body>
<button onclick="sendGet()">点击我发一个简单的请求</button>
<script type="text/javascript">
	// ajax发送请求的函数
	function sendGet(){
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
				var data = xmlHttp.responseText;
				alert(data);
			}
		};
		// get方式的简单请求
		xmlHttp.open('GET','http://localhost:3000/3-6-2-cors-1-data',true);
		xmlHttp.send();
	}
</script>
</body>
</html>

// 服务器端
// jsonp跨域
app.get('/3-6-2-json-1.js',function(req,res){
	res.render('3-4-1-post');
});
// cors.html
app.get('/cors',function(req,res){
	res.render('cors');
});

预请求

预请求是一种相对复杂的请求，需要满足：1.预请求是GET，HEAD，POST以外的方式，比如PUT，DELETE等

2.使用POST请求方式，但数据是application/xml或者text/xml的XML数据请求 3.使用了自定义的请求头信息

// 服务器
// sors预请求
app.use('/3-6-2-cors-3-data',function(req,res){
	res.set({
		'Access-Control-Allow-Origin':'*',
		'Access-Control-Allow-Methods':'GET,PUT,POST',
		'Access-Control-Allow-Headers':'X-Our-Header'
	});
	res.send('这是来自nodejs的数据');
});


//客户端
<!DOCTYPE html>
<html>
<head>
	<title>测试cors</title>
	<meta charset="utf-8">
</head>
<body>
<button onclick="sendGet()">点击发起一个请求</button>
<script type="text/javascript">
	// Ajax发送请求的函数
	function sendGet(){
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
				var data = xmlHttp.responseText;
				alert(data);
			}
		}
		// PUT方式的简单请求
		xmlHttp.open('PUT','http://127.0.0.1:3000/3-6-2-cors-3-data',true);
		// 设置请求头信息
		xmlHttp.setRequestHeader('x-Our-Header','ab');
		// 发送请求
		xmlHttp.send();
	}
</script>
</body>
</html>

附带凭证信息的请求

XMLHttpRequest对象在发送同域请求时会发送凭证（Http Cookie和验证信息，但是跨域请求则不会发送），所以想要传递cookie只能在请求头里携带

实例：

// 服务器
//  cors_cookie
app.get('/cors_cookie',function(req,res){
	res.render('cors_cookie');
});
// cors_cookie
app.get('/3-6-2-cors-4-data',function(req,res){
	console.log(req.cookies);
	res.set({
		'Access-Control-Allow-Origin':'http://127.0.0.1',
		'Access-Control-Allow-Credentials':true
	});
	res.send('这是来自nodejs的数据');
});

// 客户端
<!DOCTYPE html>
<html>
<head>
	<title>cors_cookie</title>
	<meta charset="utf-8">
</head>
<body>
	<button onclick="sendGet()">点击我发送一个cors跨域请求</button>
  <script type="text/javascript">
  	document.cookie = "name=ab";
  	// Ajax发送请求的函数
  	function sendGet(){
  		var xmlHttp = new XMLHttpRequest();
  		xmlHttp.onreadystatechange = function(){
  			if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
  				var data = xmlHttp.responseText;
  				alert(data);
  			}
  		};
  		// GET方式的简单请求
  		xmlHttp.open('GET','http://localhost:3000/3-6-2-cors-4-data',true);
  		xmlHttp.withCredentials = true;  // 只需要在客户端申明这个就好了
  		//xmlHttp.setRequestHeader('x-Our-Header','ab');
  		xmlHttp.send();
  	}
  </script>
</body>
</html>