ajax跨域请求错误-CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

最新推荐文章于 2024-03-16 20:12:23 发布

我是一朵蒲公英

最新推荐文章于 2024-03-16 20:12:23 发布

阅读量1.6w

点赞数 13

分类专栏： # 慕课网SpringBoot构建电商基础秒杀项目 Java数据结构与算法（尚硅谷）文章标签： spring boot

本文链接：https://blog.csdn.net/weixin_43391312/article/details/104743195

版权

Java数据结构与算法（尚硅谷）同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

慕课网SpringBoot构建电商基础秒杀项目

2 篇文章 0 订阅

订阅专栏

当我们在本地向服务端发起ajax跨域请求报错：
Access to XMLHttpRequest at 'http://localhost://**** from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
在这里插入图片描述
原因分析：
我们的ajax程序启动于"file:///C:/Users/HP/Desktop/getotp.html"这个html，它对应的域是本地文件，但是，我们请求的服务器其实是localhost的域名，这种情况下，虽然请求能够正确地达到服务端，并且服务端也能够正确地返回，但是，其实我们的ajax请求回调将会认定它们是两个不同的域，这种回调是不安全的，因此，会报了对应的一个错，并且走不到ajax请求的success block里边。
解决方法：
在springboot当中，处理对应的ajax跨域请求的方式，其实很简单，只要让我们的response能时刻返回"Access-Control-Allow-Origin"这个header为所有的域，也就是＊号即可，springboot给我们提供了一个简单的注解形式，也就是在相应的 Controller层上添加 @CrossOrigin 注解，就通过这样一个简单的注解方式，就可以让我们完成所有的一个springboot对应返回的web请求当中，加上跨域Allow header对应的标签。

后端代码（在Controller层上添加@CrossOrigin注解）：
在这里插入图片描述

前端html的代码：

<html>
	<head>
		<meta charset="UTF-8">
		<script src="static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
	</head>

	<body>
		<div>
			<h3>获取otp信息</h3>
			<div>
				<label>手机号</label>
				<div>
					<input  type="text" placeholder="手机号" name="telphone" id="telphone"/>
				</div>	
			</div>	
			<div>
				<button id="getotp" type="submit">
					获取otp短信
				</button>	
			</div>	
		</div>	
	</body>
	<script>
		jQuery(document).ready(function(){
			//绑定otp的click时间用于向后端发送获取手机验证码的请求
			$("#getotp").on("click",function(){
				var telphone = $("#telphone").val();
				if(telphone == null || telphone == ""){
					alert("手机号不能为空");
					return false;
				}
				$.ajax({
					type:"POST",
					contentType:"application/x-www-form-urlencoded",
					url:"http://localhost:8090/user/getotp",
					data:{
						"telphone":$("#telphone").val(),
					},
					success:function(data){
						if(data.status == "success"){
							alert("otp已经发送到了您的手机上，请注意查收");
						}else{
							alert("otp发送失败，原因为"+data.data.errMsg);
						}
					},
					error:function(data){
						alert("otp发送失败，原因为"+data.responseText);
					}
				});
				return false;
			});
		});
	</script>
</html>

最后愉快地解决问题了！
在这里插入图片描述
接下来了解一下响应头是什么（只说明上边的几个，其他自行了解）：
Content-Type：实体头部用于指示资源的MIME类型 media type 。
Authorization ：请求头含有服务器用于验证用户代理身份的凭证。
Accept ：请求头用来告知客户端可以处理的内容类型
Access-Control-Allow-Origin:＊：响应头指定了该响应的资源是否被允许与给定的origin共享，对于不需具备凭证（credentials）的请求，服务器会以“＊”作为通配符，从而允许所有域都具有访问资源的权限，或者也可以指定进行限制。
Content-Length :74 : 表明了实体主体部分的大小（单位是字节）
Access-Control-Allow-Methods：PUT,POST,GET,DELETE,OPTIONS：服务器端允许的请求方式，常用get、post。

我是一朵蒲公英

关注

13
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
ajax跨域请求错误-CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

当我们在本地向服务端发起ajax跨域请求报错：Access to XMLHttpRequest at 'http://localhost://**** from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested res...
复制链接

扫一扫