Ajax跨域(协议(如http,https),域名(或IP),端口号)
前端调用后端服务接口时,接口不是同一域(协议,域名,端口号),就会产生跨域问题。
同源策略
Web是构建在同源策略基础之上的,所谓同源是指 协议,域名,端口相同。浏览器会检查请求响应的结果是否同源,非同源会被拦截,并抛出异常。这就是跨域拦截。
Ajax跨域产生原因
1.浏览器限制,浏览器出于安全问题,一旦跨域就会报错;
2.跨域;
3.XHR(XMLHttpRequest)请求(最重要的原因),如果是其他类型请求,浏览器不会报错。
(同时满足以上条件就会产生跨域问题)
由跨域的产生的原因可以提出解决方法:
方案一:指定参数不让浏览器限制跨域,客户端操作(客户操作),明显不太合理;
方案二:xhr,将请求类型改变成其他类型就不会被浏览器跨域限制-->jsonp,但jsonp有很多弊端,后面有详细说明;
方案三:跨域,
- 法1:让被调用方 支持XMLHttpRequest跨域(在响应的内容中加入字段,告诉浏览器我允许此次跨域调用,浏览器会通过校验);
- 法2: 让调用方 使用代理,将url转成被调用方的域
方案一(客户端指定参数):
在浏览器右击属性,在目标字段后加入--disable-web-security --user-data-dir
方案二(jsonp:json for padding):
前端:
$.ajax({
url:base+"/get1",
dataType:"jsonp",
//cache:false,//cache是否缓存,如果true,缓存,返回结果只有callback字段,false有2个字段callback和一个随机码,使得不缓存
success:function(json){
}
})
//jsonp是工作原理是动态创建一个script标签,src是url,(响应完会消失)
//此时的请求类型/请求返回类型是type:script,Content-type:appliaction/javascript
//XMLHttpRequest的请求类型/返回类型是type:xhr,Content-type:appliaction/json
//需要后台返回的是js代码,所以需要后台配合也做相应的改动,否则浏览器会出现解析错误(会将结果当作js来解析,如果返回结果来时json,就会出错)
后端:
在返回结果上+callback字段,callback的值是(返回结果的)js的函数名
方案三/法1:
在响应头中加入字段,允许跨域(浏览器-->被调用方(服务端));
//这是允许http://localhost:8081的跨域请求,或者"*"需要所有端的跨域,所有请求方法的跨域
方案三/法2,比如:
客户端:http://localhost:8080,
服务器端:http://localhost:3000,
客户端使用代理: