Ajax中的同源政策

最新推荐文章于 2024-10-04 08:00:00 发布

lvhanghmm

最新推荐文章于 2024-10-04 08:00:00 发布

阅读量94

点赞数

文章标签： ajax java linux nginx http

本文链接：https://blog.csdn.net/Lv__Hang/article/details/119558060

版权

同源政策是浏览器为了保护用户数据安全而实施的一种安全策略，它阻止了Ajax跨域请求。当尝试从一个源向另一个源发送Ajax请求时，浏览器会因缺少'Access-Control-Allow-Origin'头而报错。本文通过实例演示了如何测试非同源Ajax请求并展示了由此产生的错误信息。

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

Ajax中的同源政策

Ajax请求限制

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

什么是同源

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

同源政策的目的

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

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

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

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

最终的效果：

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.