AJAX跨域

JS不容许跨域，不是指浏览器压根不发起请求，只是浏览器拿到响应后，可能对当前域不可见。

测试场景

在http://www.jianshu.com/（或者其他非HTTPS网站）主页的console下，发起对csdn的ajax请求

$.ajax("http://www.csdn.net/",{
success:function(data){
console.log(data)
}
});

控制台打出下面的错误日志：

XMLHttpRequest cannot load http://www.csdn.net/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.oschina.net' is therefore not allowed access.

翻译过来意思是：“http响应头里没有发现“Access-Control-Allow-Origin”，因此不可操作”。

这里产生一个疑问：如果响应头里面包含Access-Control-Allow-Origin是不是就不存在跨域问题了？

几种常见的跨域方法

1，jsonp跨域

jsonp请求实际是一个js文件请求，原理不细说，使用jsonp，需要请求方与接收方稍微配合一下，约定一个回调前缀，如下：

Js端(基于jquery)：

$.ajax("http://www.csdn.net/",{
dataType:"jsonp",//设置jsonp类型
jsonp:"prefix",//和后台约定回调前缀，默认为callback
success:function(data){
console.log(data)
}
});

浏览器会发起Js请求，url如下：

http://www.csdn.net?prefix=jQuery1112046676

假想csdn服务端:

//获取约定的前缀回调参数，结果为：jQuery1112046676
Stringprefix=request.getParameter("prefix");
//业务结果，一般是json
Stringresult="{"code":200,"res":"ok"}";
//特殊处理result，带上前缀和前后括号（）
returnprefix+"("+result+")";

浏览器会得到响应，如下：

jQuery1112046676({"code":200,"res":"ok"})

2，代理跨域

关于代理，即本域服务器负责接收请求，然后转发到其他域，两种实现方式：

• 2.1，基于服务器配置，实现反向代理

假设在简书的服务器搭建了nginx，我们可以这样配置：

location = /cross-domain/csnd/firstpage {
       proxy_pass http://www.csdn.net/;   #反向代理到csdn首页
 }

• 2.2，基于代码，搭建Http客户端

假设在简书后台编写一个Http代理客户端，去调用csdn，以下是Java的搞法：

/**
*后台跨域访问csdn首页
*/
@RequestMapping("/cross-domain/csnd/firstpage")
publicStringindex(HttpServletResponseresponse)throwsIOException{
URLurl=newURL("http://www.csdn.net/");
HttpURLConnectioncon=(HttpURLConnection)url.openConnection();
con.setDoInput(true);
con.setDoOutput(true);
con.setUseCaches(false);
con.setRequestMethod("GET");
con.setRequestProperty("Connection","Keep-Alive");
con.setRequestProperty("Charset","UTF-8");
BufferedReaderbr=newBufferedReader(newInputStreamReader(
con.getInputStream()));
StringBufferstringBuffer=newStringBuffer();
Stringstr="";
while((str=br.readLine())!=null){
stringBuffer.append(str);
}
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriterout=response.getWriter();
out.print(stringBuffer.toString());
out.flush();
out.close();
}

对于代理的方式，前端Js只需要发起同域的约定url请求即可，比如：

$.ajax("http://www.jianshu.com/cross-domain/csnd/firstpage",{
success:function(data){
console.log(data)
}
});

3，设置http响应头 'Access-Control-Allow-Origin' 容许当前域

可以实现任何一方的代码都不做修改，老一点的浏览器不支持该特性。

（编辑：李大同）

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