在IE版本中,IE10开始支持使用 XMLHTTPRequest 的 CORS;而IE8和IE9不支持XMLHTTPRequest ,直接使用会有拒绝访问、session丢失等一系列问题,所以跨域对象只能用XDomainRequest对象,而jQuery并不兼容XDomainRequest。针对此方法网络上有解决的插件 jQuery-ajaxTransport-XDomainRequest。
jQuery XDomainRequest 是一个利用 XDomainRequest 对象为 IE8、IE9 实现跨域资源共享(CORS - Cross Origin Resource Sharing)的 jQuery 插件。
GitHub地址:https://github.com/MoonScript/jquery-ajaxTransport-XDomainRequest
要XDomainRequest在Internet Explorer中使用,请求必须为:
- 只有GET或POST
- 张贴时,数据将始终与发送Content-Type的text/plain
- 只有HTTP或HTTPS
- 协议必须与呼叫页面的方案相同
- 始终异步
使用方法
至少使用jQuery 1.5版,只需在页面中包含jquery.xdomainrequest.min.js脚本,然后像往常一样进行AJAX调用。
注意:
(1)IE11 弃用了 XDomainRequest 对象,所以应用是最好加上浏览器的版本判断
(2)CORS要求Access-Control-Allow-Origin标头出现在服务器的AJAX响应中。
<!--[if lte IE 9]>
<script type='text/javascript' src='${site.sitePath}/xdomainrequest/jquery.xdomainrequest.min.js'></script>
<![endif]-->
基本用法
GET方法:
$.getJSON('URL地址').done(function(data) {
console.log(data);
//业务代码实现
});
POST方法:
// POST
$.ajax({
url: 'url地址',
data: 'post的参数',
contentType: 'text/plain',
type: 'POST',
dataType: 'json'
}).done(function(data) {
console.log(data);
//业务代码实现
});
修改后台服务器:
后台服务中设置允许跨域请求,在filter拦截器中进行设置:
//设置跨域请求
HttpServletResponse response = (HttpServletResponse) res;
//此处ip地址为需要访问服务器的ip及端口号
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type,Token,Accept, Connection, User-Agent, Cookie");
response.setHeader("Access-Control-Max-Age", "3628800");
chain.doFilter(req, response);
filter实例如下:
package com.taiji.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebFilter(filterName = "CorsFilter", urlPatterns = { "/*" })
public class CorsFilter implements Filter {
@Override
public void destroy() {
// TODO Auto-generated method stub
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
//设置跨域请求
HttpServletResponse response = (HttpServletResponse) res;
//此处ip地址为需要访问服务器的ip及端口号
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type,Token,Accept, Connection, User-Agent, Cookie");
response.setHeader("Access-Control-Max-Age", "3628800");
// response.setHeader("P3P","CP=CAO PSA OUR");
chain.doFilter(req, response);
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
// TODO Auto-generated method stub
}
}