Ajax跨域

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,

客户端使用代理:

proxyTable: {
      '/goods':{
        target: "http://localhost:3000",
        changeOrigin: true
      },
      '/users/**': {
        target: "http://localhost:3000", 
        changeOrigin: true
      }
    }
 //在浏览器看到请求头的Request URL是http://localhost:8080/goods,实际访问的http://localhost:3000/goods
 
jsonp的弊端
1.需要服务端的改动,如果服务器不是本公司的会比较麻烦;
2.只支持GET请求,即使指定post,发出去的请求还是get;
3.不是xhr,不能使用xhr的一些特性,比如异步,各种事件等等。
 
请求是先执行还是先判断?
简单请求:先执行后判断
非简单请求:先判断后执行
 
简单请求
常见的简单请求:
方法:GET,HEAD,POST
请求的header中
无自定义头
content-type是以下几种:
text/plain
multipart/form-data
application/x-www-form-urlencoded
 
非简单请求
put ,delete方法的ajax请求
发送json格式的ajax请求
带自定义头的ajax请求
 
非简单请求会先执行预检命令,方法Request Method:OPTIONS,检查通过后请求才发送出去,否则,抛出异常且不会发送请求
可以在后台设置max-age和有效期时长,将预检结果缓存,在此时间段内,此请求不会再预检,直接使用上一回的预检结果
 
原文地址:https://www.cnblogs.com/baixinL/p/11968629.html