ajax跨域问题

最新推荐文章于 2024-11-05 10:16:00 发布

原创最新推荐文章于 2024-11-05 10:16:00 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#跨域 #callback #jsonp #servlet #filter

跨域访问专栏收录该内容

0 篇文章

订阅专栏

最近工作。公司采用前后端分离。所以不可避免就遇到了跨域问题。现在粗略的整理一下。方便自己和大家。

目前，就我理解。跨域问题，并非是请求不能到达服务器的问题。而是浏览器本身的同源策略引起的。是为了保持请求的安全性。请求发到服务器后，服务器返回数据，但是浏览器会对非同源的数据进行拦截。f12.看你的请求是否出现

Access-Control-Allow-Origin

字段。

还是上图吧。一下分别是请求和控制台的展示，以及后台的输出

浏览器的控制台如下；

在看看代码的输出：

这就说明了请求本身没有一点的问题。

出现这种情况有两种解决方式。

1.大家熟知的jsonp。关于这方面可以去jsonp官网，了解一下。很简单。只能发送get请求。把数据拼接在url后面，利用callback回调函数对数据进行解析。

2.可以采用cros。开通指定的远程服务来获取数据。可以有多种请求方式

在这里粗略说一下。不懂的同学可以交流，希望大神指教。

简单的说一下，就是在响应给浏览器的时候，设置远程源请求。对于servlet来说。直接实现过滤器就可以实现简单的cros跨域请求。上图如下

public class CrosFilter implements Filter{

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
			throws IOException, ServletException {
		HttpServletResponse response = (HttpServletResponse)res;
		HttpServletRequest	request = (HttpServletRequest)req;
		response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020");
		chain.doFilter(request, response);
	}

	@Override
	public void destroy() {
		// TODO Auto-generated method stub
		
	}

}

到目前为止。已经解决了数据不能获取的问题。在使用cros的时候，还会有别的问题，如何传递cookie等等认证参数.这种问题不会出现在jsonp中。原因就是jsonp会在url后面拼接上所有的参数。但是cros会呀。

在你的ajax中加上属性

xhrFields:{
withCredentials:true
}

resp.setHeader("Access-Control-Allow-Credentials","true");

在后台的请求头上也设置上就OK了。

当然在跨域问题上。还会有请求方法和请求头的过滤。直接上代码

resp.setHeader("Access-Control-Allow-Methods", "GET,POST,DELETE,OPTIONS");
resp.setHeader("Access-Control-Allow-Headers", "X-Requested-With,accept,origin,content-type,authorization");

大概到这里就结束了。