Ajax中的同源政策

Ajax中的同源政策

Ajax请求限制

Ajax只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的HTML文件只能向A网站服务器中发送Ajax请求，B网站中的HTML文件只能向B网站中发送Ajax请求，但是A网站是不能向B网站发送Ajax请求的，同理，B网站也不能向A网站发送Ajax请求。

什么是同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。

同源政策的目的

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

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错。

测试：测试非同源Ajax请求！！

1. 第一步当然就是你得有两个不是同源的本地的服务器了！端口不同即可！
   
   
2. 第二步就是在二号服务器中的qpp.js写一个测试路由！如图!
   
   
3. 第三步就是在一号服务器里的lvhang文件夹下面创建一个访问二号服务器html文件！为什么是这个文件夹呢？!因为我的工作目录就是拼接的这个目录!也就是说是自定义的！
   
   
4. 然后就是在刚刚创建的html文件中写Ajax的实现步骤代码！

	<script type="text/javascript">
			// 1 创建Ajax对象
			let xhr = new XMLHttpRequest();
			// 2 告诉Ajax对象要想哪儿发送请求，以什么方式发送请求
			// 1）请求方式2）请求地址
			xhr.open('get', 'http://localhost:3001/test');
			// 发送请求
			xhr.send();
			// 获取服务器端响应到客户端的数据！
			xhr.onload = function() {
				console.log(xhr.responseText)
			}

		</script>

1. 最终的效果：
   
   
   
   Access to XMLHttpRequest at 'http://localhost:3001/test' from origin 'http://localhost:3003' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

出现上面的报错信息就代表Ajax不能够向非同源的服务器发送请求!