热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

030_CORS深究

在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似NoAccess-Control-Allow-Originhead
在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on the requested resource.这样的报错。

这样的错误,一般是由于CORS跨域验证机制设置不正确导致的,本文将详细讲解CORS跨域验证机制的原理,让您轻松掌握CORS跨域设置的使用方法,安全、方便的进行前端开发。

什么是CORS

CORS(Cross-Origin Resource Sharing 跨源资源共享),当一个请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

例如最常见的,在一个域名下的网页中,调用另一个域名中的资源。

相对于上面这种静态的调用方式,还可以通过Ajax技术来动态发起跨域请求。例如如下的方式,利用XMLHttpRequest对象发送一个GET请求,获取另一个域名下的图片内容。


<html> <head>CORS Testhead> <body> <div id&#61;"img_Div">div> <script type&#61;"text/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 &#61; document.getElementById("img_Div"); var xhr &#61; createXmlHttpRequest(); xhr.open(&#39;GET&#39;, &#39;http://oss.youkouyang.com/1.jpg&#39;, true); xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;image/jpeg&#39;); xhr.responseType &#61; "blob"; xhr.onload &#61; function() { if (this.status &#61;&#61; 200) { var blob &#61; this.response; var img &#61; document.createElement("img"); img.onload &#61; function(e



推荐阅读
author-avatar
hlfk77136
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有