摘要:跨域源资源共享同源域名端口协议均相同基本思想是使用自定义的头部,让服务器能声明允许访问的来源。简单请求所有的跨域请求简单或非简单总会包含一个的请求头部由浏览器添加不受用户控制。
跨域源资源共享
同源:域名、端口、协议均相同
CORS基本思想是使用自定义的HTTP头部,让服务器能声明允许访问的来源。
使用CORS时,异步请求会被分为简单请求(非Preflight)和非简单请求。
所有的跨域请求(简单或非简单)总会包含一个origin的请求头部,由浏览器添加不受用户控制。值由协议、域名、端口组成,说明请求的来源。下面为一个Origin头部示例:
Origin:http://www.hello.com
服务器接受这个请求,会在响应头Access-Control-Allow-Origin回发相同的源信息。( * 表明该资源可以被任意外域访问)
Access-Control-Allow-Origin:http://www.hello.com非简单请求
非简单CORS请求会在正式请求之前发送一次Preflight请求,得到确认之后才会发送真正的XMLHttpRequest请求。浏览器自动处理这两个请求,并且Preflight请求结束后,结果将按照响应中指定的时间缓存起来.所以只是第一次发送这种请求时会多一次HTTP请求.
Preflight请求使用OPTIONS方法,发送下列头部:
Origin:与简单请求相同 Access-Control-Request-Method:请求自身使用的方法
以下是一个带有自定义头部Custom-Header的使用POST方法发送的请求.
Origin:http://www.hello.com Access-Control-Request-Method:POST Access-Control-Request-Headers:Custom-Header
var url = "http://www.hello.com"; var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.setRequestHeader("Custom-Header", "value"); xhr.send();
服务器通过在响应中发送如下头部与浏览器沟通:
Access-Control-Allow-Origin:http://www.hello.com Access-Control-Allow-Methods:POST,GET Access-Control-Allow-Headers:Custom-Header Access-Control-Allow-Max-Age:28000 //表示将Preflight缓存的时长(秒),期间内无需再次发送预请求
另外通过将XMLHttpRequest的withCredentials属性设置为true就可以发送带凭据(cookie、HTTP认证、客户端SSL证明等)的跨域请求.
var xhr=new XMLHttpRequest(); xhr.withCredentials=true;
如果服务器接受带凭据的请求会用下面的HTTP头部响应:
Access-Control-Allow-Credentials:trueJSONP(JSON with padding)
JSONP由两部分组成:回调函数+数据,回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指定的.而数据就是传入回调函数中的JSON数据.JSONP是通过动态元素,为其src属性指定一个跨域的URL.
function doSomething(response) { console.log(response); } var script=document.createElement("script"); script.src="http://www.hello.com?callback=doSomething"; document.body.insertBefore(script,document.body.firstChild);
1.定义方法doSomething,然后把doSomething传给服务器,告知服务器我需要调用doSomething方法.
2.服务端生成JSON.将JSON数据以参数的形式放到doSomething中,这样就生成了一段js脚本返回给客户端.
3.客户端浏览器解析script标签,执行doSomething(JSON)
otherWindow.postMessage(message, targetOrigin);
otherWindow:指目标窗口,也就是给哪个window发消息,是window.frames属性的成员或者由 window.open 方法创建的窗口.
参数说明:message: 是要发送的消息,类型为 String、Object (IE8、9 不支持);targetOrigin: 是限定消息接收范围,不限制请使用*
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93657.html
摘要:在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。 在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。关于跨域,有N种类型,现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍),内容...
摘要:关于,强烈推荐阅读跨域资源共享详解阮一峰另外,这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。 前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下。 个人见识有限,如有差错,请多多见谅,欢迎提出iss...
摘要:需注意的是由于同源策略的限制,所读取的为跨域请求接口所在域的,而非当前页。目前,所有浏览器都支持该功能需要使用对象来支持,也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略,不是协议的一部分。 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源...
摘要:上节我们讲了同源策略,这节我们讲讲如何跨域。当这些从的脚本执行出错,因为违背了同源策略为了保证用户信息不被泄露,错误信息不会显示出来,取而代之只会返回一个。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每...
阅读 1378·2021-10-08 10:04
阅读 2681·2021-09-22 15:23
阅读 2724·2021-09-04 16:40
阅读 1172·2019-08-29 17:29
阅读 1492·2019-08-29 17:28
阅读 2988·2019-08-29 14:02
阅读 2221·2019-08-29 13:18
阅读 838·2019-08-23 18:35