实验环境准备:
本地存在一个web应用,模拟服务端。调用其接口返回如下
客户端用一个html模拟(直接在tomcat的webapps下建一个Cors的文件夹,将html放到Cors下面),源码如下:
跨域测试:
1、浏览器内通过发起客户端调用,点击“刷新”按钮触发的跨域调用
(注,localhost和127.0.0.1 作为主机名,不同,故为跨域调用),浏览器中会受到调用失败的提示
2、浏览器内通过发起客户端调用,点击“刷新”按钮触发的调用
此时协议、主机名、端口均相同则不为跨域调用,可以成功返回
问题解决:
既然模拟出了跨域场景,接着就是用CORS的方式来让跨域调用成功。
tomcat下的配置下载cors-filter-1.7.jar,java-property-utils-1.9.jar这两个库文件,放到lib目录下。(可在http://search.maven.org上查询并下载。)服务端的工程项目中web.xml中添加如下配置:CORS com.thetransactioncompany.cors.CORSFilter cors.allowOrigin * cors.supportedMethods GET, POST, HEAD, PUT, DELETE cors.supportedHeaders Accept, Origin, X-Requested-With, Content-Type, Last-Modified cors.exposedHeaders Set-Cookie cors.supportsCredentials true CORS /*
可以看到之前失败的跨域调用已经可以成功调用
CORS的原理:
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
以刚才成功的跨域请求为例
浏览器发现这次跨域请求是简单请求(什么是简单请求参看),就自动在头信息之中,添加一个Origin字段。
Origin
字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。如果Origin
指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin
字段,就知道出错了,从而抛出一个错误;如果Origin
指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。
这几个字段就是我们刚才添加的fileter添加的。浏览器看到这几个头消息之后,就可以正常响应了,不会再进行拦截。上面只是简单介绍了CORS的原理,详细可以 看参考文档。
参考文档: