同源策略、跨域

什么是同源策略##

同源策略是浏览器最基本的功能,同源指得是相同的域名、协议和端口号,不同的源的客户端脚本在没有明确授权的情况下,无法相互读取对方的资源称之为同源策略。

什么是跨域?跨域有几种实现形式##

跨域即突破同源策略限制的方法,并且都需要得到服务端的支持,有如下几种形式:

JSONP:html中script标签可以引入其他域下的js,比如引入线上的jquery库。

  • 创建script标签,src的地址执行后端接口,最后加个参数callback=function,其中function为本地定义的处理后端数据的函数
  • 服务端在收到请求后,解析参数,计算返还数据,输出 function(data) 字符串
  • function(data)会放到script标签做为js执行。此时会调用function函数,将data做为参数

CORS:CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别,代码完全一样。

  • 当使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin
  • 后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin;如果其值包含域名或者 “”号。“”号表示允许任何域名向我们的服务端提交请求
  • 浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。

降域

使用document.domain的方法实现相同基础域名之间的跨域
例:有三个域名
a.test.com
b.test.com
test.com
可在a.test.com和b.test.com加入document.domain = "test.com"实现以上三个域名之间的跨域。

postmessage

postmessage为window的方法,可实现跨文档、多窗口、跨域消息的传递,postMessage(data,origin)方法接受两个参数,data是要传递的数据,origin是目标的源
参考参考:http://www.cnblogs.com/dolphinX/p/3464056.html

同源策略及跨域出错演示##

同源策略.png
跨域出错.png

JSONP跨域及CORS跨域演示##

JSONP跨域.png
CORS跨域.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.什么是同源策略 1.要了解同源策略,我们必须先知道源即orgin 以百度页面为例,谷歌浏览器打开控制台:输入l...
    GarenWang阅读 1,470评论 2 8
  • 1. 什么是同源策略 同源是指域名、协议、端口相同。同源策略(Same-Origin Policy)是浏览器的一个...
    65_刘璐阅读 711评论 0 0
  • 问答 1. 什么是同源策略 同源是指域名、协议、端口相同。同源策略(Same-Origin Policy)是浏览器...
    Maggie_77阅读 473评论 0 1
  • 题目1: 什么是同源策略 同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离...
    馒头Mum阅读 1,608评论 0 1
  • 一、同源策略 1、先来说说什么是源 对于以下的这段URL http:// 协议名 user:pass 登录信...
    黄露hl阅读 1,404评论 0 1