AJAX跨域问题讲解
为什么会发生产生跨域问题?
[ 产生跨域的起因 ]
1.浏览器限制
2.跨域(协议,域名,端口任何一个不同)
3.XHR(XMLHttpRequest)请求
也就是说当我们发送的是XMLHttpRequest请求不同的域名,浏览器就会限制访问,那么就会产生跨域问题。
[ 处理跨域问题的思路 ]
1.改动用户端浏览器参数来解除限制 浏览器启动加入
--disable-web-security
2.Jsonp处理是XHR请求的问题.
3.跨域: 被调用方支持跨域,调用方的隐藏请求
跨域问题处理办法
1. JSONP处理跨域
[原理]:
<script>
请求不受同源政策限制 :JSONP动态创立<script>
标签,通过<script>
函数调用发出请求,返回值是也是js,函数名callback参数的值,函数参数是返回的json对象()
[弊端]:1.只支持Get请求2.发送到不是XHR请求
[jsonp请求实现]
$.ajax({ url: 'url", dataType: "jsonp", jsonp: "callback", cache: true, success: function(json) { result = json; }});
[jsonp请求实现原理]
//动态创立script标签function addScriptTag(src) { var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script);}window.onload = function () { addScriptTag('http://example.com/ip?callback=foo');}// 回调函数-获取数据function foo(data) { console.log('Your public IP address is: ' + data.ip);};
2. 跨域处理方案CORS
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信过程,都是浏览器自动完成,不需要客户参加。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动增加少量附加的头信息,有时还会多出一次附加的请求,但客户不会有感觉。因而,实现CORS通信的关键是服务器。只需服务器实现了CORS接口,即可以跨源通信。
[简单请求-post请求]
处理:被调用放服务端设置Access-Control-Allow-Origin
被调用放服务端设置Access-Control-Allow-Methods
res.addHeader("Access-Control-Allow-Origin", "*") //允许所有域名可以跨域调用res.addHeader("Access-Control-Allow-Methods", "*") //允许所有请求方式跨域调用
[非简单请求-带cookie的请求]
$.ajax({ type: "get", url: "url", xhrFields: { withCredentials: true }, success: function(json) { result = json; }});
处理:带cookie时origin必需全匹配, 不能使用 *
被调用放服务端添加设置Access-Control-Allow-Credentials
res.addHeader("Access-Control-Allow-Origin", "localhost:8081")res.addHeader("Access-Control-Allow-Methods", "*")res.addHeader("Access-Control-Allow-Credentials", "true") //enable cookie
[非简单请求-带header的请求]
$.ajax({ type: "get", url: 'url", headers: { "x-header1": "AAA" }, beforeSend: function(xhr) { xhr.setRequestHeader("x-header2", "BBB") }, success: function(json) { result = json; }});
处理:带cookie时origin必需全匹配, 不能使用 *
被调用放服务端添加设置Access-Control-Allow-Header
res.addHeader("Access-Control-Allow-Origin", "*")res.addHeader("Access-Control-Allow-Methods", "*")res.addHeader("Access-Control-Allow-Header", "content-Type,x-header1,x-header2")
综上所述:
//带cookie的时候,origin必需是全匹配,不能使用*String origin = req.getHeader("Origin");if (!org.springframework.util.StringUtils.isEmpty(origin)) { res.addHeader("Access-Control-Allow-Origin", origin);}res.addHeader("Access-Control-Allow-Methods", "*");// 支持所有自己设置头和预检命令(非简单请求会有预检命令)String headers = req.getHeader("Access-Control-Request-Headers");if (!org.springframework.util.StringUtils.isEmpty(headers)) { res.addHeader("Access-Control-Allow-Headers", headers); }res.addHeader("Access-Control-Max-Age", "3600");// enable cookieres.addHeader("Access-Control-Allow-Credentials", "true");
3. Nginx代理商
假如我们请求的时候还是用前台的域名,Nginx帮我们把这个请求转发到真正的后台域名上
[Nginx配置]
server{ # 监听9000端口 listen 9000; # 域名是localhost server_name localhost; #但凡localhost:9000/api这个样子的,都转发到真正的服务端地址http://localhost:9001 location ^~ /api { proxy_pass http://localhost:9001; } }
简单请求&非简单请求
只需同时满足以下两大条件,就属于简单请求,其他属于非简单请求
(1) 请求方法是以下三种方法之一:HEAD、GET、POST
(2)HTTP的头信息不超出以下几种字段(无自己设置头):
Accept Accept-Language Content-Language Last-Event-ID
(3)Content-Type:只限于三个值
application/x-www-form-urlencoded multipart/form-data text/plain
码字不易,假如觉得对您有帮助,给个赞给一个小小的鼓励吧 (.)!
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » AJAX跨域问题讲解