• 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和有效期时长,将预检结果缓存,在此时间段内,此请求不会再预检,直接使用上一回的预检结果
     
  • 相关阅读:
    IE6/IE7浏览器中"float: right"自动换行的解决方法
    IE6/IE7浏览器不支持display: inline-block;的解决方法
    如何解决两个li之间的缝隙
    input、button、a标签 等定义的按钮尺寸的兼容性问题
    在一个页面重复使用一个js函数的方法
    关于让input=text,checkbox居中的解决方法
    遮盖层实现(jQuery+css+html)
    button,input type=button按钮在IE和w3c,firefox浏览器区别
    前端-选项卡(菜单栏)
    形成人、机器、过程和数据的互联互通
  • 原文地址:https://www.cnblogs.com/baixinL/p/11968629.html
Copyright © 2020-2023  润新知