Ajax请求的跨域(CORS)问题

前端之家收集整理的这篇文章主要介绍了Ajax请求的跨域(CORS)问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
用浏览器,通过XHR(XMLHttpRequest)请求向另外一个域名请求数据时,会碰到跨域(CORS)问题。
CORS:Cross-Origin Resource Sharing


什么是跨域?

简单的来说,出于安全方面的考虑,浏览器页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间的通信。


哪些情况允许跨域访问,哪些不允许?见下表,http://www.a.com/a.js访问以下URL的结果:

URL 说明 是否允许通信
http://www.a.com/b.js 同一域名下 允许
http://www.a.com/script/b.js 同一域名下不同文件 允许
http://www.a.com:8000/b.js 同一域名,不同端口 不允许
https://www.a.com/b.js 同一域名,不同协议 不允许
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://script.a.com/b.js 主域相同,子域不同 不允许
http://a.com/b.js 同一域名,不同二级域名(同上) 不允许
http://www.b.com/b.js 不同域名 不允许


解决方法

基本的解决思路就是利用filter在response中加入一个头"Access-Control-Allow-Origin",比如

response.setHeader("Access-Control-Allow-Origin","*"); //允许所有请求
response.setHeader("Access-Control-Allow-Origin","http://www.baidu.com:80"); //只允许来自http://www.baidu.com:80的请求,用逗号分开

具体的解决方案:

1、自定义filter,在filter中给response加入header:("Access-Control-Allow-Origin","*")

/**
 * 防止浏览器缓存页面或请求结果
 * @author XuJijun
 *
 */
public class NoCacheFilter implements Filter {

	@Override
	public void destroy(){
	}

	@Override
	public void doFilter(ServletRequest req,ServletResponse resp,FilterChain chain) throws IOException,ServletException {
        HttpServletResponse response = (HttpServletResponse)resp;

        response.setDateHeader("Expires",-1);
        response.setHeader("Cache_Control","no-cache");
        response.setHeader("Pragma","no-cache");
        
        response.setHeader("Access-Control-Allow-Origin","*");     //允许跨域请求
        
        chain.doFilter(req,resp);
	}

	@Override
	public void init(FilterConfig arg0) throws ServletException	{
	}
}

结果图:


或使用第三方软件包:
2、 http://software.dzhuvinov.com/cors-filter.html
3、 https://github.com/eBay/cors-filter

或mvnrepository上搜索“cors filter”:http://mvnrepository.com/search?q=cors-filter


已经过时的解决方法:JSONP

什么是JSONP?

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,而JSONP(JSON withPadding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取


在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码


参考文章
W3C CORS规范: http://www.w3.org/TR/cors/

(原创文章,转载请注明转自Clement-Xu的csdn博客http://www.jb51.cc/article/p-gjtaxask-gw.html

猜你在找的Ajax相关文章