CORS跨域资源共享详细介绍-创新互联

今天小编就为大家带来一篇CORS跨域资源共享详细介绍的文章。小编觉得挺不错的，为此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联于2013年开始，先为卫辉等服务建站，卫辉等地企业，进行企业商务咨询服务。为卫辉企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

了解下同源策略

源（origin）*：就是协议、域名和端口号；同源：就是源相同，即协议、域名和端口完全相同；同源策略：同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源；

同源策略的分类：

DOM 同源策略：即针对于DOM，禁止对不同源页面的DOM进行操作;如不同域名的 iframe 是限制互相访问。XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

不受同源策略限制：

页面中的链接，重定向以及表单提交(因为表单提交，数据提交到action域后，本身页面就和其没有关系了，不会管请求结果，后面操作都交给了action里面的域)是不会受到同源策略限制的。资源的引入不受限制，但是js不能读写加载的内容：如嵌入到页面中的，，，等</p><p>为什么要跨域限制</p><p>如果没有 DOM 同源策略：那么就没有啥xss的研究了，因为你的网站将不是你的网站，而是大家的，谁都可以写个代码操作你的网站界面</p><p>如果没有XMLHttpRequest 同源策略，那么就可以很轻易的进行CSRF（跨站请求伪造）攻击：</p><p>用户登录了自己的网站页面 a.com,cookie中添加了用户标识。用户浏览了恶意页面 b.com，执行了页面中的恶意 AJAX 请求代码。b.com 向 a.com发起 AJAX HTTP 请求，请求会默认把 a.com对应cookie也同时发送过去。a.com从发送的 cookie 中提取用户标识，验证用户无误，response 中返回请求数据;数据就泄露了。而且由于Ajax在后台执行，这一过程用户是无法感知的。（附）有了XMLHttpRequest 同源策略就可以限制CSRF攻击？别忘了还有不受同源策略的：表单提交和资源引入，（安全问题下期在研究）</p><p>跨域决解方案</p><p>JSONP 跨域：借鉴于 script 标签不受浏览器同源策略的影响，允许跨域引用资源；因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域；</p><p>缺点：所有网站都可以拿到数据，存在安全性问题，需要网站双方商议基础token的身份验证。只能是GET，不能POST。可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。服务器代理：浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。document.domain、window.name 、location.hash：借助于iframe决解DOM同源策略postMessage：决解DOM同源策略，新方案CORS（跨域资源共享）：这里讲的重点</p><p>CORS（跨域资源共享）</p><p>HTML5 提供的标准跨域解决方案，是一个由浏览器共同遵循的一套控制策略，通过HTTP的Header来进行交互；主要通过后端来设置CORS配置项。</p><p>CORS简单使用</p><p>之前说得CORS跨域，嗯嗯，后端设置Access-Control-Allow-Origin：*|[或具体的域名]就好了；第一次尝试：</p><pre>app.use(async(ctx,next) => { ctx.set({ "Access-Control-Allow-Origin": "http://localhost:8088" })</pre><p>发现有些请求可以成功，但是有些还是会报错：</p><p><img src="/upload/otherpic39/6866.jpg" alt="CORS跨域资源共享详细介绍"></p><p>请求被同源策略阻止，预请求的响应没有通过检查：http返回的不是ok?</p><p>并且发现发送的是OPTIONS请求:</p><p><img src="/upload/otherpic39/6867.jpg" alt="CORS跨域资源共享详细介绍"></p><p>发现：CORS规范将请求分为两种类型，一种是简单请求，另外一种是带预检的非简单请求</p><p>简单请求和非简单请求</p><p>浏览器发送跨域请求判断方式：</p><p>浏览器在发送跨域请求的时候，会先判断下是简单请求还是非简单请求，如果是简单请求，就先执行服务端程序，然后浏览器才会判断是否跨域；而对于非简单请求，浏览器会在发送实际请求之前先发送一个OPTIONS的HTTP请求来判断服务器是否能接受该跨域请求；如果不能接受的话，浏览器会直接阻止接下来实际请求的发生。什么是简单请求</p><p>请求方法是如下之一：</p><p>GETHEADPOST</p><p>所有的Header都只包含如下列表中（没有自定义header）：</p><p>Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma除此之外都是非简单请求</p><p>CORS非简单请求配置须知</p><p>正如上图报错显示，对于非简单请求，浏览器会先发送options预检，预检通过后才会发送真是的请求；发送options预检请求将关于接下来的真实请求的信息给服务器：</p><pre>Origin：请求的源域信息 Access-Control-Request-Method：接下来的请求类型，如POST、GET等 Access-Control-Request-Headers：接下来的请求中包含的用户显式设置的Header列表</pre><p>服务器端收到请求之后，会根据附带的信息来判断是否允许该跨域请求，通过Header返回信息：</p><pre>Access-Control-Allow-Origin：允许跨域的Origin列表 Access-Control-Allow-Methods：允许跨域的方法列表 Access-Control-Allow-Headers：允许跨域的Header列表,防止遗漏Header，因此建议没有特殊需求的情况下设置为* Access-Control-Expose-Headers：允许暴露给JavaScript代码的Header列表 Access-Control-Max-Age：大的浏览器预检请求缓存时间，单位为s</pre><p>CORS完整配置</p><p>koa配置CORS跨域资源共享中间件：</p><pre>const cors = (origin) => { return async (ctx, next) => { ctx.set({ "Access-Control-Allow-Origin": origin, //允许的源 }) // 预检请求 if (ctx.request.method == "OPTIONS") { ctx.set({ 'Access-Control-Allow-Methods': 'OPTIONS,HEAD,DELETE,GET,PUT,POST', //支持跨域的方法 'Access-Control-Allow-Headers': '*', //允许的头 'Access-Control-Max-Age':10000, // 预检请求缓存时间 // 如果服务器设置Access-Control-Allow-Credentials为true，那么就不能再设置Access-Control-Allow-Origin为*,必须用具体的域名 'Access-Control-Allow-Credentials':true // 跨域请求携带身份信息(Credential，例如Cookie或者HTTP认证信息) }); ctx.send(null, '预检请求') } else { // 真实请求 await next() } } } export default cors</pre><p>现在不管是简单请求还是非简单请求都可以跨域访问啦～</p><p>跨域时如何处理cookie</p><p>cookie：</p><p>我们知道http时无状态的，所以在维持用户状态时，我们一般会使用cookie；cookie每次同源请求都会携带；但是跨域时cookie是不会进行携带发送的；</p><p>问题：</p><p>由于cookie对于不同源是不能进行操作的；这就导致，服务器无法进行cookie设置，浏览器也没法携带给服务器（场景：用户登录进行登录操作后，发现响应中有set-cookie但是，浏览器cookie并没有相应的cookie）</p><p>决解：</p><p>浏览器请求设置withCredentials为true即可让该跨域请求携带 Cookie；使用axios配置axios.defaults.withCredentials = true服务器设置Access-Control-Allow-Credentials=true允许跨域请求携带 Cookie“积跬步、行千里”—— 持续更新中~，喜欢的话留下个赞和关注哦！</p><p>以上就是CORS跨域资源共享的具体操作，代码应该是足够清楚的，而且我也相信有相当的一些例子可能是我们日常工作可能会见得到的。通过这篇文章，希望你能收获更多。</p> <br> 文章标题：CORS跨域资源共享详细介绍-创新互联 <br> 网站链接：<a href="http://dzwzjz.com/article/cdgdch.html">http://dzwzjz.com/article/cdgdch.html</a> </div> </div> <div class="othernews"> <h3>其他资讯</h3> <div class="othernews_list"> <ul> <li> <a href="/article/iggejs.html">php将word转swf的方法</a> </li><li> <a href="/article/iggico.html">Java中switch关键字的原理是什么</a> </li><li> <a href="/article/iggidj.html">web开发中有哪些方法使背景图片占据整个屏幕</a> </li><li> <a href="/article/iggide.html">如何在LINUX中做禁ping</a> </li><li> <a href="/article/iggegp.html">pythonshell是什么意思</a> </li> </ul> </div> </div> </div> </div> <div class="footer"> <div class="footer_content"> <div class="footer_content_top clear"> <div class="content_top_share fl"> <div><img src="/Public/Home/img/logo.png"></div> <div class="top_share_content"> <dd>分享至：</dd> <dt class="bdsharebuttonbox clear" id="share"> <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a> </dt> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> </div> <div class="content_top_left fl clear"> <div class="top_left_list fl"> <dd><a href="/about/">关于我们</a></dd> <dt> <a href="/about/#gsjj">公司简介</a> <a href="/about/#fzlc">发展历程</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/service/">服务项目</a></dd> <dt> <a href="/service/">高端网站建设</a> <a href="/miniprogram/">小程序开发</a> <a href="/service/app.html">APP开发</a> <a href="/service/yingxiao.html">网络营销</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/jianzhan/">建站知识</a></dd> <dt> <a href="/jianzhan/">行业新闻</a> <a href="/jianzhan/">建站学堂</a> <a href="/jianzhan/">常见问题</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/contact/">联系我们</a></dd> <dt> <a href="/contact/#lxwm">公司地址</a> <a href="/contact/#rczp">人才招聘</a> </dt> </div> </div> <div class="content_top_right addressR fr"> <div class="top_right_title addressf_title"> <a href="javascript:;" class="on">成都</a> <a href="javascript:;">达州</a> </div> <div class="top_right_content addressf"> <div class="right_content_li on"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt> </div> </div> <div class="right_content_li"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：达州市南岸区弹子石腾龙大道58号2栋21-6</dt> </div> </div> </div> </div> </div> <div class="link"> 友情链接： <a href="http://www.lszwz.com/" title="乐山网站建设" target="_blank">乐山网站建设</a>   <a href="http://www.cdhuace.com/led.html" title="成都LED显示屏" target="_blank">成都LED显示屏</a>   <a href="http://m.cdcxhl.cn/H5/ " title="自适应网页设计" target="_blank">自适应网页设计</a>   <a href="https://www.cdxwcx.com/jifang/xiyun.html" title="成都移动机房" target="_blank">成都移动机房</a>   <a href="http://www.xhgfhy.com/ " title="成都防护栏" target="_blank">成都防护栏</a>   <a href="http://www.cqcxhl.cn/" title="重庆网站建设" target="_blank">重庆网站建设</a>   <a href="https://www.cdxwcx.com/jifang/mianyang.html" title="绵阳电信机房" target="_blank">绵阳电信机房</a>   <a href="http://www.kswcd.com/solution/" title="网站方案" target="_blank">网站方案</a>   <a href="http://www.cddcz.com/" title="成都网站建设" target="_blank">成都网站建设</a>   <a href="http://www.tjjierui.cn/" title="什邡做网站" target="_blank">什邡做网站</a>    </div> </div> <div class="footer_content_copyright clear">版权所有：青羊区大橙子信息咨询工作室 <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">蜀ICP备2022028542号-14</a> </div> </div>  <div class="FloatingWindow clear"> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt><span>在线</span>咨询</dt> </div> </a> <a href="javascript:;" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>服务热线</dt> </div> <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div> </a> <a href="javascript:;" class="FloatingWindow_list fr STop"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>TOP</dt> </div> </a> </div> <script src="/Public/Home/js/jquery-1.8.3.min.js"></script> <script src="/Public/Home/js/comm.js"></script> <script src="/Public/Home/js/wow.js"></script> <script src="/Public/Home/js/common.js"></script> </body> </html> <script> $(".cont img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>

大橙子网站建设，新征程启航

CORS跨域资源共享详细介绍-创新互联