如何免费建com的网站,网页设计培训班学费多少钱,wordpress 企业,网上打广告【本期嘉宾介绍】睿得#xff0c;具有多年研发、运维、安全等IT相关从业经历。目前从事CDN、存储、视频直播点播的技术支持。喜爱钻研#xff0c;喜爱编码#xff0c;喜爱分享。 在日常的项目开发时会不可避免的需要进行跨域操作#xff0c;而在实际进行跨域请求时#xf… 【本期嘉宾介绍】睿得具有多年研发、运维、安全等IT相关从业经历。目前从事CDN、存储、视频直播点播的技术支持。喜爱钻研喜爱编码喜爱分享。 在日常的项目开发时会不可避免的需要进行跨域操作而在实际进行跨域请求时经常会遇到类似 No Access-Control-Allow-Origin header is present on the requested resource.这样的报错。 这样的错误一般是由于CORS跨域验证机制设置不正确导致的本文将详细讲解CORS跨域验证机制的原理让您轻松掌握CORS跨域设置的使用方法安全、方便的进行前端开发。 什么是CORS CORSCross-Origin Resource Sharing 跨源资源共享当一个请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。 例如最常见的在一个域名下的网页中调用另一个域名中的资源。 相对于上面这种静态的调用方式还可以通过Ajax技术来动态发起跨域请求。例如如下的方式利用XMLHttpRequest对象发送一个GET请求获取另一个域名下的图片内容。 !DOCTYPE html
htmlheadCORS Test/headbodydiv idimg_Div/divscript typetext/javascript //XmlHttpRequest对象 function createXmlHttpRequest(){ if(window.ActiveXObject){ //如果是IE浏览器 return new ActiveXObject(Microsoft.XMLHTTP); }else if(window.XMLHttpRequest){ //非IE浏览器 return new XMLHttpRequest(); } } function getFile() {var img_Container document.getElementById(img_Div);var xhr createXmlHttpRequest();xhr.open(GET, http://oss.youkouyang.com/1.jpg, true);xhr.setRequestHeader(Content-Type, image/jpeg);xhr.responseType blob;xhr.onload function() {if (this.status 200) {var blob this.response;var img document.createElement(img);img.onload function(e) {window.URL.revokeObjectURL(img.src); };img.src window.URL.createObjectURL(blob);img_Container.appendChild(img); }}xhr.send(null);}/scriptdiv classrowinput typebutton onclickgetFile() valueGet //div/body
/html CORS的作用 为了改善网络应用程序开发人员要求浏览器供应商允许跨域请求。跨域请求主要用于 调用XMLHttpRequest或fetchAPI通过跨站点方式访问资源网络字体例如Bootstrap通过CSS使用font-face 跨域调用字体通过canvas标签绘制图表和视频。CORS的安全隐患 跨域请求和Ajax技术都会极大地提高页面的体验但同时也会带来安全的隐患其中最主要的隐患来自于CSRFCross-site request forgery跨站请求伪造。 CSRF攻击的大致原理是 用户通过浏览器访问正常网站A例如某银行通过用户的身份认证比如用户名/密码成功A网站。网站A产生Cookie信息并返回给用户的浏览器 用户保持A网站页面登录状态在同一浏览器中打开一个新的TAB页访问恶意网站B网站B接收到用户请求后返回一些攻击性代码请求A网站的资源例如转账请求浏览器执行恶意代码在用户不知情的情况下携带Cookie信息向网站A发出请求。网站A根据用户的Cookie信息核实用户身份此时用户在A网站是已登录状态A网站会处理该请求导致来自网站B的恶意请求被执行。CORS验证机制 出于安全原因浏览器限制从脚本中发起的跨域HTTP请求。默认的安全限制为同源策略 即JavaScript或Cookie只能访问同域下的内容。 W3C推荐了一种跨域的访问验证的机制即CORSCross-Origin Resource Sharing 跨源资源共享。 这种机制让Web应用服务器能支持跨站访问控制使跨站数据传输更加安全减轻跨域HTTP请求的风险。 CORS验证机制需要客户端和服务端协同处理。 CORS浏览器支持情况 目前主流浏览器都已基本提供对跨域资源共享的支持移动端浏览器也几乎全部支持。客户端处理机制 基于上述的CSRF的风险各主流的浏览器都会对动态的跨域请求进行特殊的验证处理。验证处理分为简单请求验证处理和预先请求验证处理。 简单请求 当请求同时满足下面两个条件时浏览器会直接发送GET请求在同一个请求中做跨域权限的验证。 请求方法是下列之一 GETHEADPOST请求头中的Content-Type请求头的值是下列之一 application/x-www-form-urlencodedmultipart/form-datatext/plain简单请求时浏览器会直接发送跨域请求并在请求头中携带Origin 的header表明这是一个跨域的请求。 服务器端接到请求后会根据自己的跨域规则通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头来返回验证结果。 如果验证成功则会直接返回访问的资源内容。 如果验证失败则返回403的状态码不会返回跨域请求的资源内容。 可以通过浏览器的Console查看具体的验证失败原因 预先请求 当请求满足下面任意一个条件时浏览器会先发送一个OPTION请求用来与目标域名服务器协商决定是否可以发送实际的跨域请求。 请求方法不是下列之一 GETHEADPOST请求头中的Content-Type请求头的值不是下列之一 application/x-www-form-urlencodedmultipart/form-datatext/plain 浏览器在发现页面中有上述条件的动态跨域请求的时候并不会立即执行对应的请求代码而是会先发送Preflighted requests预先验证请求Preflighted requests是一个OPTION请求用于询问要被跨域访问的服务器是否允许当前域名下的页面发送跨域的请求。 OPTIONS请求头部中会包含以下头部Origin、Access-Control-Request-Method、Access-Control-Request-Headers。 服务器收到OPTIONS请求后设置Access-Control-Allow-Origin、Access-Control-Allow-Method、Access-Control-Allow-Headers头部与浏览器沟通来判断是否允许这个请求。 如果Preflighted requests验证通过浏览器才会发送真正的跨域请求。 如果Preflighted requests验证失败则会返回403状态浏览器不会发送真正的跨域请求。 可以通过浏览器的Console查看具体的验证失败原因 带认证的请求 默认情况下跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true可以指定某个请求应该发送凭据。xhr.withCredentials true; 如果服务器接收带凭据的请求会用下面的HTTP头部来响应。 Access-Control-Allow-Credentials: true 服务器还可以在Preflight响应中发送这个HTTP头部表示允许源发送带凭据的请求。 如果发送的是带凭据的请求但服务器的响应中没有包含这个头那么浏览器就不会把响应交给JavaScript(responseText中将是空字符串size为0)。 注意当withCredentials属性设置为true需要response header中的Access-Control-Allow-Origin为一个确定的域名而不能使用*这样的通配符。 服务端处理机制 服务器端对于跨域请求的处理流程如下 首先查看http头部有无origin字段如果没有或者不允许直接当成普通请求处理结束如果有并且是允许的那么再看是否是preflight(methodOPTIONS)如果不是preflight简单请求就返回Allow-Origin、Allow-Credentials等并返回正常内容。如果是preflight预先请求就返回Allow-Headers、Allow-Methods等内容为空HTTP Header Request header Origin Origin头在跨域请求或预先请求中标明发起跨域请求的源域名。Access-Control-Request-Method Access-Control-Request-Method头用于表明跨域请求使用的实际HTTP方法Access-Control-Request-Headers Access-Control-Request-Headers用于在预先请求时告知服务器要发起的跨域请求中会携带的请求头信息Response header Access-Control-Allow-Origin Access-Control-Allow-Origin头中携带了服务器端验证后的允许的跨域请求域名可以是一个具体的域名或是一个*表示任意域名。简单请求时浏览器会根据此响应头的内容决定是否给脚本返回相应内容预先验证请求时浏览器会根据此响应头决定是否发送实际的跨域请求。Access-Control-Expose-Headers Access-Control-Expose-Headers头用于允许返回给跨域请求的响应头列表在列表中的响应头的内容才可以被浏览器访问。Access-Control-Max-Age Access-Control-Max-Age用于告知浏览器可以将预先检查请求返回结果缓存的时间在缓存有效期内浏览器会使用缓存的预先检查结果判断是否发送跨域请求。Access-Control-Allow-Credentials Access-Control-Allow-Credentials用于告知浏览器当withCredentials属性设置为true时是否可以显示跨域请求返回的内容。简单请求时浏览器会根据此响应头决定是否显示响应的内容。预先验证请求时浏览器会根据此响应头决定在发送实际跨域请求时是否携带认证信息。Access-Control-Allow-Methods Access-Control-Allow-Methods用于告知浏览器可以在实际发送跨域请求时可以支持的请求方法可以是一个具体的方法列表或是一个*表示任意方法。简单请求时浏览器会根据此响应头的内容决定是否给脚本返回相应内容预先验证请求时浏览器会根据此响应头决定是否发送实际的跨域请求。Access-Control-Allow-Headers Access-Control-Allow-Headers用于告知浏览器可以在实际发送跨域请求时可以支持的请求头可以是一个具体的请求头列表或是一个*表示任意请求头。简单请求时浏览器会根据此响应头的内容决定是否给脚本返回相应内容预先验证请求时浏览器会根据此响应头决定是否发送实际的跨域请求。 配置CORS规则 nginx上的CORS配置 OSS上的CORS配置 CDN上的CORS配置 注意由于CDN的缓存特性CDN配合OSS时需要在CDN中设置CORS配置。
