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 resource.
ajax跨域请求错误-CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource_第1张图片
原因分析:
    我们的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注解):
ajax跨域请求错误-CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource_第2张图片

前端html的代码:


	
		
		
	

	
		

获取otp信息

最后愉快地解决问题了!
ajax跨域请求错误-CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource_第3张图片
接下来了解一下响应头是什么(只说明上边的几个,其他自行了解):
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。

你可能感兴趣的:(慕课网#)