同源策略与通过跨域资源共享实现ajax跨域访问

但凡是业务中遇到ajax跨域请求的,都需要了解什么是同源策略,什么是跨域资源共享以及如何通过跨域资源共享实现ajax跨域请求

同源策略

即Same origin policy,可以这么说,web就是建立在同源策略之上的,浏览器只是针对同源策略的一种实现,它是浏览器最核心也最基本的安全功能。——百度
那么,什么是同源呢?

同源即相同的协议,相同的主机(域名),相同的端口,缺一不可,一样不同都不能称之为同源

那么,什么又是同源策略?

同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源

当然,不是所有情景都受到同源策略的限制:

Tables
表单提交
重定向
页面中的链接
img,link,iframe 等形式的跨域资源的引入

跨域资源共享

过于严格的同源策略会影响大型分布式网站的开发,最常见的一个情形就是ajax不能跨域调用,但是CORS可以解决这个问题。

下面是网上总结最全的描述:CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
请求过程如下图:
这里写图片描述
当浏览器接收到非同源数据的时候,会首先去头信息看Access-Control-Allow-Origin字段里面的值,如果当前域在Access-Control-Allow-Origin里面有包含,则忽略同源策略。这种方式使用了一个新的Origin请求头和一个新的Access-Control-Allow-Origin响应头扩展了HTTP。允许服务端设置Access-Control-Allow-Origin头标识哪些站点可以请求文件,或者设置Access-Control-Allow-Origin头为”*”,允许任意站点访问文件。

Ajax跨域实现

上面已经提到,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。对于需要跨域调用的接口我们只需要做如下操作
方式一:

response.setHeader("Access-Control-Allow-Origin", "允许调用的域:例如http://www.google.com");
response.setHeader("Access-Control-Allow-Credentials", "true");

方式二:(针对SpringMVC框架)
springMVC的版本在4.2或以上版本,可以使用注解实现跨域, 我们只需要在需要跨域的方法上添加注解@CrossOrigin即可

@CrossOrigin(origins="http://www.google.com",allowCredentials="true")

总结

解决ajax跨域还可以通过转移前台ajax跨域请求到后台接口中,通过后台接口调用跨域的接口方法,再返回给页面,这样就规避了同源策略的影响。

猜你喜欢

转载自blog.csdn.net/weixin_37490221/article/details/80786592