Ajax请求的跨域（CORS）问题

发布时间：2020-12-16 01:55:23 所属栏目：百科来源：网络整理

导读：用浏览器，通过XHR（XMLHttpRequest）请求向另外一个域名请求数据时，会碰到跨域（CORS）问题。 CORS：Cross-Origin Resource Sharing 什么是跨域？简单的来说，出于安全方面的考虑，浏览器页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。

用浏览器，通过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","*")

如何添加一个filter： http://www.52php.cn/article/p-awecdytc-gw.html

/**
 * 防止浏览器缓存页面或请求结果
 * @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/

XMLHttpRequest： https://en.wikipedia.org/wiki/XMLHttpRequest

（原创文章，转载请注明转自Clement-Xu的csdn博客：http://www.52php.cn/article/p-gjtaxask-gw.html）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!