开发过程中常常会遇见跨域问题,产生跨域的三个条件:
1. 浏览器限制
2. 跨域
3. 请求类型是xhr(xmlhttprequerst)
解决跨域的方案也有很多种:
1. 浏览器-->需用户配置
2. XHR-->JSONP
3. 跨域 a.被调用方修改代码支持跨域 b.调用方隐藏跨域(通过代理)
1.浏览器
在浏览器的安装目录启动终端,输入禁止浏览器做跨域检查的校验参数,新启一个浏览器。命令参数:chrome --disable-web-security --user-data-dir=g:\temp3
2. XHR-->JSONP
jsonp是一种非正式传输协议,是前后台约定的协议,而不是官方协议。
jsonp的实现原理是:前后台约定带有“callback”这个参数的请求就是jsonp请求,前台发出去的请求加了“callback”参数,当后台发现请求中带“callback”时,后台就知道这是一个jsonp请求,就会把返回的数据由json变成JS代码返回,JS代码内容就是一个函数的调用,函数名是“callback”参数的值,而原来需要返回的json对象数据在这里作为参数传递返回。
前端代码:
$.ajax({ url: dataType:"jsonp",//主要就是dataType是jsonp类型 });
setTimeout(function){
expect(result).toEqual({ "data":"get1 ok" });
}
后台代码:
例如java语言,需继承AbstractJsonpResponseBodyAdvice类,重写构造函数并传参数“callback”,super("callback");jsonp里传输的就是json的数据格式,只是在发送请求时多加一个参数,其值为回调函数。后台程序在获得该回调函数后,把准备好的json数据返回。
JSONP弊端:
服务器需要改动,不是自己的代码,无能为力- 只支持get方法, 因为原理是动态创建`script`- 发送的不是XHR请求,不支持异步各种事件。
3.跨域
被调用方解决:
是基于支持跨域的解决思路,基于http协议关于跨域方面的一些规定,在响应头里加允许调用字段,跨域请求是直接从浏览器发送过去的;
调用方解决:
是基于隐藏跨域的解决思路,跨域请求不会直接从浏览器发到被调用方,而是从中间的http服务器转发过去的。举例子:调用方为a.com,被调用方为b.com。 被调用方解决时,在浏览器上会看到b.com的url,修改的是被调用方的http服务器。调用方解决时,在浏览器上看到的都是a.com的url,但是该到b.com的请求还是会到b.com的。修改的是调用方的http服务器。
简单请求:先发送请求后判断
非简单请求:先发送预检请求,然后再真正请求
带有Cookie的ajax跨域 Access-Control-Allow-Origin的value不能为"*", 其值必须是当前调用方的url,eg:servletResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:8081"); 之后把Access-Control-Allow-Credentials的value设置为true.