码迷,mamicode.com
首页 > Web开发 > 详细

Ajax请求的跨域(CORS)问题

时间:2015-07-22 20:53:57      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:ajax   xmlhttprequest   跨域   

用浏览器,通过XHR(XMLHttpRequest)请求向另外一个域名请求数据时,会碰到跨域(CORS)问题。
CORS:Cross-Origin Resource Sharing 


什么是跨域?

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


解决方法:

基本的解决思路就是利用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 with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。


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


参考文章:

(原创文章,转载请注明转自Clement-Xu的csdn博客





版权声明:本文为原创文章,转载请注明转自Clement-Xu的csdn博客。

Ajax请求的跨域(CORS)问题

标签:ajax   xmlhttprequest   跨域   

原文地址:http://blog.csdn.net/clementad/article/details/47008803

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!