美文网首页
跨域方案

跨域方案

作者: 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