美文网首页
跨域方案

跨域方案

作者: pawN_f294 | 来源:发表于2018-01-03 13:53 被阅读0次

    JSONP

    • JSON with padding 简称JSONP ,实现原理

    通过动态<script>元素,指定src属性为一个跨域的URL。跟后端约定一个函数的调用。通常回调的函数名在URL中指定,例如:

       <script src="http://freegeorp.net/json/?callback=handleResponse"></script>
    
    • 返回的数据类似于,直接当做是JS来执行
      handleResponse({name: 'nama', value: 'value'})
    
    • 可以通过动态添加script元素加载
        function loadScript (url) {
          var script = document.createElement('script');
          script.src = url;
          var head = document.getElementsByTagName('head')[0];
          head.appendChild(script);
          head.removeChild(script);
        }
    
    • JSONP的一些限制

    1. 只可以使用GET请求
    2. 难以监听得知是否请求失败 (script.onerror) IE9+

    cors(跨资源共享)

    当浏览器发送一个XMLHttpRequest请求时,如果发现该请求不符合同源策略,会给请求头部添加一个额外的origin,其中包含着请求页面的源信息(协议、域名、端口),以便服务器根据这个头部信息决定是否给予响应。

    • cors的一些限制

    不可以使用setRequestHeader()设置自定义头部。
    不能发送和接收cookie。
    调用getA了了ResponseHeaders()方法总会放回空字符串

      Origin: http://www.baidu.com
    

    如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin; 浏览器判断如果有这个头部信息并且这个头部信息匹配源信息,浏览器就允许用户获取这个请求的数据。

      Access-Control-Allow-Origin: http://baidu.com 
      或者这个是一个公共的数据
      Access-Control-Allow-Origin: *
    

    相关文章

      网友评论

          本文标题:跨域方案

          本文链接:https://www.haomeiwen.com/subject/xdragxtx.html