CORS
[1] 同源策略
[2]
跨域问题的来源是浏览器为了请求安全而引入的基于同源策略的安全特性。当页面和请求的协议、主机名或端口不同时,浏览器判定两者不同源,即为跨域请求。需要注意的是跨域是浏览器的限制,服务端并不受此影响。当产生跨域时,我们可以通过 JSONP、CORS、postMessage 等方式解决。
跨域问题的来源是浏览器为了请求安全而引入的基于**同源策略(Same-origin policy)**的安全特性。同源策略是浏览器一个非常重要的安全策略,基于这个策略可以限制非同源的内容与当前页面进行交互,从而减少页面被攻击的可能性。
当页面和请求的协议、主机名或端口不同时,浏览器判定两者不同源,从而产生跨域。需要注意的是跨域是浏览器的限制,实际请求已经正常发出和响应了。
如上图所示,一个 origin 由协议(Protocol)、主机名(Host)和端口(Port)组成,这三块也是同源策略的判定条件,只有当协议、主机名和端口都相同时,浏览器才判定两者是同源关系,否则即为跨域。
前端常见的跨域解决方案有 CORS、反向代理(Reverse Proxy)、JSONP 等。
CORS 是目前最为广泛的解决跨域问题的方案。方案依赖服务端/后端在响应头中添加 Access-Control-Allow-*
头,告知浏览器端通过此请求。
涉及到的端
CORS 只需要服务端/后端支持即可,不涉及前端改动。
具体实现方式
CORS 将请求分为简单请求(Simple Requests)和需预检请求(Preflighted requests),不同场景有不同的行为:
简单请求
不会触发预检请求的称为简单请求。当请求满足以下条件时就是一个简单请求:
GET
、HEAD
、POST
。Accept
、Accept-Language
、Content-Language
、Content-Type
。
application/x-www-form-urlencoded
、multipart/form-data
、text/plain
。需预检请求
当一个请求不满足以上简单请求的条件时,浏览器会自动向服务端发送一个 OPTIONS 请求,通过服务端返回的 Access-Control-Allow-*
判定请求是否被允许。
CORS 引入了以下几个以 Access-Control-Allow-*
开头:
Access-Control-Allow-Origin
表示允许的来源Access-Control-Allow-Methods
表示允许的请求方法Access-Control-Allow-Headers
表示允许的请求头Access-Control-Allow-Credentials
表示允许携带认证信息当请求符合响应头的这些条件时,浏览器才会发送并响应正式的请求。
反向代理解决跨域问题的方案依赖同源的服务端对请求做一个转发处理,将请求从跨域请求转换成同源请求。
涉及到的端
反向代理只需要服务端/后端支持,几乎不涉及前端改动,只用切换接口即可。
具体实现方式
反向代理的实现方式为在页面同域下配置一套反向代理服务,页面请求同域的服务端,服务端请求上游的实际的服务端,之后将结果返回给前端。
JSONP 是一个相对古老的跨域解决方案。主要是利用了浏览器加载 JavaScript 资源文件时不受同源策略的限制而实现跨域获取数据。
涉及到的端
JSONP 需要服务端和前端配合实现。
具体实现方式
JSONP 的原理是利用了浏览器加载 JavaScript 资源文件时不受同源策略的限制而实现的。具体流程如下:
window.getHZFEMember = (num) => console.log('HZFE Member: ' + num);
。https://hzfe.org/api/hzfeMember?callback=getHZFEMember
。<script>
并把 src
设为上一步的请求 URL 并插入到文档中,如 <script src="https://hzfe.org/api/hzfeMember?callback=getHZFEMember" />
。getHZFEMember(17)
。HZFE Member: 17
。iframe
加载 B 页面并监听消息,B 页面发送消息。window.name
页面跳转不改变的特性实现跨域,即 iframe
加载一个跨域页面,设置 window.name
,跳转到同域页面,可以通过 $('iframe').contentWindow.name
拿到跨域页面的数据。document.domain
设置为一级域名实现跨域。document.domain
设置为同域名实现跨域(端口被置为 null)。LocalStorage 和 SessionStorage 同样受到同源策略的限制。而跨域读写的方式也可以使用前文提到的 postMessage。
前端项目在统计前端报错监控时会遇到上报的内容只有 Script Error
的问题。这个问题也是由同源策略引起。在 <script>
标签上添加 crossorigin="anonymous"
并且返回的 JS 文件响应头加上 Access-Control-Allow-Origin: *
即可捕捉到完整的错误堆栈。
前端项目在图片处理时可能会遇到图片绘制到 Canvas 上之后却不能读取像素或导出 base64 的问题。这个问题也是由同源策略引起。解决方式和上文相同,给图片添加 crossorigin="anonymous"
并在返回的图片文件响应头加上 Access-Control-Allow-Origin: *
即可解决。
本站文章用于学习交流
新浪微博 | QQ群1:161644793qq | QQ群2:98711210
网站地图 | 网站统计
Copyright 2011 - 2021 paocode.com All Rights Reversed. 浙ICP备19041980号
瞎猫内容中心