Ajax跨域的概念就不在这边陈述了...
Ajax跨域请求真正的请求之前会进行一次预请求OPTIONS请求，为了让服务器响应是否允许本次跨域请求，那么如果在你的后台程序不能够响应这次预请求，后续的真正的跨域请求也就不可能进行响应了。
首先说一下常见的Ajax跨域请求一些解决方案：
- Jsonp
$(function(){
var url ='http://www.xxxx.com/xxx';
$.ajax({
type:'post',
url:url,
data:{name:'xiaoysec'},
dataType:'jsonp',
success:function(result){
console.log(result);
}
});
});
但是问题是即使type设置成post，实际上发送的也是get请求，想要发送post请求，可以参考jsonp发送post请求，关键的步骤如下图
关键设置
- CORS协议
CORS协议相关知识有时间再补充进来，上面说过ajax跨域请求首先会进行一次OPTION预请求，那么我的解决方案就是过滤OPTION请求然后响应这次请求。
具体的做法也是比较简单的，思路就是定义一个全局的过滤器，代码如下：
/**
* 跨域请求过滤器
* @author xiaoysec
*
*/
@Component
public class CrosFilter implements Filter {
@Override
public void destroy() {
// TODO Auto-generated method stub
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest httpRequest = (HttpServletRequest) request;
if (httpRequest.getMethod() == "OPTIONS" && httpRequest.getHeader("Origin") != null) {
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Access-Control-Allow-Origin", "*");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE");
httpResponse.setHeader("Access-Control-Max-Age", "3600");
httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
// httpResponse.setHeader("","");
// response.setHeader("","");
}
chain.doFilter(request, response);
}
@Override
public void init(FilterConfig config) throws ServletException {
// TODO Auto-generated method stub
}
}
只要就是判断请求的方法和请求中是不是带有Origin字段，因为当一次跨域请求进行预请求的时候会携带Origin字段表示访问的来源，这样后续的请求就可以继续进行了
