跨域之CORS

最新推荐文章于 2025-09-12 18:08:49 发布

weixin_34006965

最新推荐文章于 2025-09-12 18:08:49 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

文章标签： java web.xml

原文链接：https://my.oschina.net/zjg23/blog/798895

本文介绍了一种使用CORS过滤器解决跨域问题的方法，并详细解释了如何在Tomcat服务器中配置cors-filter来允许跨域请求。此外还提供了一个简单的HTML示例用于演示跨域调用的过程。

为什么80%的码农都做不了架构师？>>>

实验环境准备：

本地存在一个web应用，模拟服务端。调用其接口http://127.0.0.1:8080/PanServer/files/dir/1235/query返回如下

客户端用一个html模拟（直接在tomcat的webapps下建一个Cors的文件夹，将html放到Cors下面），源码如下：

<html>
<head>
<meta charset="utf-8" />
<script>
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.innerHTML = text;
}

function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.innerHTML = 'Error code: ' + code;
}

function helloAjax() {
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
if (request.readyState === 4) { // 成功完成
    // 判断响应结果:
    if (request.status === 200) {
        // 成功，通过responseText拿到响应的文本:
		//alert('request.responseText');
        return success(request.responseText);
    } else {
        // 失败，根据响应码判断失败原因:
		//alert('request.status');
        return fail(request.status);
    }
} else {
    console.log('continuing……');
}
}

// 发送请求:
request.open('GET', 'http://localhost:8080/PanServer/files/dir/1235/query');
request.send();

alert('请求已发送，请等待响应...');
}

</script>
</head>
<body>
<div>
<p id="test-response-text"></p>
<p><button type="button" onclick="helloAjax()">刷新</button></p>
</div>
</body>
</html>

跨域测试：

1、浏览器内通过http://127.0.0.1:8080/Cors/corstest.html发起客户端调用，点击“刷新”按钮触发http://localhost:8080/PanServer/files/dir/1235/query的跨域调用

（注，localhost和127.0.0.1 作为主机名，不同，故为跨域调用），浏览器中会受到调用失败的提示

2、浏览器内通过http://localhost:8080/Cors/corstest.html发起客户端调用，点击“刷新”按钮触发http://localhost:8080/PanServer/files/dir/1235/query的调用

此时协议、主机名、端口均相同则不为跨域调用，可以成功返回

问题解决：

既然模拟出了跨域场景，接着就是用CORS的方式来让跨域调用成功。

tomcat下的配置
下载cors-filter-1.7.jar，java-property-utils-1.9.jar这两个库文件，放到lib目录下。（可在
http://search.maven.org上查询并下载。）服务端的工程项目中web.xml中添加如下配置： 

<filter>  
    <filter-name>CORS</filter-name>  
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>  
    <init-param>  
     <param-name>cors.allowOrigin</param-name>  
        <param-value>*</param-value>  
    </init-param>  
    <init-param>  
     <param-name>cors.supportedMethods</param-name>  
        <param-value>GET, POST, HEAD, PUT, DELETE</param-value>  
    </init-param>  
    <init-param>  
     <param-name>cors.supportedHeaders</param-name>  
        <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>  
    </init-param>  
    <init-param>  
        <param-name>cors.exposedHeaders</param-name>  
        <param-value>Set-Cookie</param-value>  
    </init-param>  
    <init-param>  
        <param-name>cors.supportsCredentials</param-name>  
        <param-value>true</param-value>  
    </init-param>  
</filter>  
<filter-mapping>  
    <filter-name>CORS</filter-name>  
    <url-pattern>/*</url-pattern>  
</filter-mapping>

可以看到之前失败的跨域调用已经可以成功调用

CORS的原理：

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

以刚才成功的跨域请求为例

浏览器发现这次跨域请求是简单请求（什么是简单请求参看跨域资源共享 CORS 详解），就自动在头信息之中，添加一个Origin字段。

Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误；如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。