(转)HTML5开发中Access-Control-Allow-Origin跨域问题
今天准备通过JavaScript的方式调用问说问答的内容,由于使用的不同的二级域名,遇到了一个跨域问题,虽然可以使用JSON或者XML来解决这个问题,但是我们可以通过Access-Control-Allow-Origin
解决跨域问题,下面一起来看看Access-Control-Allow-Origin
跨域问题的解决方法。
什么是跨域?
顾名思义,跨域就是不同的域名下的资源访问,会被浏览器的本地安全策略阻止,例如www.uedsc.com去AJAX请求一个wenda.uedsc.com的资源,他们实际上是不同的两个二级域名,顶级域名是uedsc.com,就会出现跨域访问问题。
下面的这张表格可以清晰解释那些属于跨域,那时不是属于跨域
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://170.32.82.74/b.js |
域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js |
同一域名,不同二级域名 | 不允许 |
http://www.a.com/a.js http://a.com/b.js |
二级域名和一级域名 | 不允许(cookie这种情况下也不允许访问) |
http://www.b.com/a.js http://www.a.com/b.js |
不同域名 | 不允许 |
有了对跨域的基本概念了解后,就可直接进入这篇文章的主题了。
跨域访问解决方法
若在接收请求的服务端abc.com/B页面用的是PHP语言,则在页面头部加入,注意一定是在没有输出任何信息之前:
// 指定可信任的域名来接收响应信息,推荐 header('Access-Control-Allow-Origin:http://A.abc.com');
或者你可以设置响应任意域名的资源
// 使用通配符 * ,表示当前服务端通话任何域名发起请求,不推荐 header('Access-Control-Allow-Origin:*');
就这样在服务端简单加一句响应头responese headers声明,一个跨域请求就不会被浏览器的同源安全策略所阻止了!
注意
添加响应头responese headers
时,允许跨域请求的域名带不带斜杠/还是有区别的,带斜杠/会报错:
XMLHttpRequest cannot load abc.com/B. The ‘Access-Control-Allow-Origin’ header has a value ‘http://A.abc.org/’ that is not equal to the supplied origin. Origin ‘http://A.abc.org’ is therefore not allowed access.
header('Access-Control-Allow-Origin:*');
是HTML5新增的一项标准功能,因此 IE10以下版本的浏览器是不支持的,因此,如果要求兼容IE9或更低版本的ie浏览器,会导致使用此种方式的跨域请求以及传递Cookie
的计划夭折,最终还得回归JSONP,目前主流 的处理方式是使用JSONP,易于实现,兼容性好,可查的资料也很多。
跨域解决后,如果还要操作Cookie
,还得继续补增响应头:
header('Access-Control-Allow-Credentials:true');
需要将 XMLHttpRequest 对象的 withCredentials
属性设置为 true
,JQuery1.5.1+ 就开始提供了相应的字段,使用方式如下:
$.ajax({url:"B.abc.com",xhrFields:{withCredentials:true},crossDomain:true });
设置 withCredentials
为 true
的请求中会包含 A.abc.com端的所有Cookie
,这些Cookie
仍然遵循同源策略,所以,你只能访问其中和 abc.com/B同根域的Cookie,而无法访问其他域的Cookie。
Access-Control-Allow-Origin
实则是html5 Cross-Origin Resource Sharing实现的最重要的一点参数配置。
Cross-Origin Resource Sharing,跨域资源共享,简称 CORS,可以作为一种跨域请求以及响应的解决方案。
附:禁用浏览器安全策略
禁用chrome本地安全策略,不用配服务器环境也能发起ajax请求:
chrome 桌面快捷键 右键属性 在快捷方式标签下的“目标”框中加入 --disable-web-security
,重启浏览器即可
转载于:https://www.cnblogs.com/zhangmingcheng/p/7407111.html
(转)HTML5开发中Access-Control-Allow-Origin跨域问题相关推荐
- 实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie
实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie 1-使用npm install axios;命令安装axios 2-新建一个文件夹再建一个.js后缀文件 ...
- 日常开发中的几个常用跨域处理方式
设置express代理请求 在基于vue-cli的项目中,在开发环境配置(config/dev.env.js)中设置代理,能够将所有/apidomain开头的请求都通过npm run dev启动的ex ...
- 好程序员技术文档HTML5开发中的javascript闭包
好程序员技术文档HTML5开发中的javascript闭包,事实上,通过使用闭包,我们可以做很多事情.比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率,同时避免对命 ...
- springboot中通过cors协议解决跨域问题
2019独角兽企业重金招聘Python工程师标准>>> 1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可 ...
- 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-4.跨域且传输数据,并优化后端接口
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-4.优化后端接口,前端使用axios实现接口功能 技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站 ...
- CDN中,字体文件的跨域问题和解决
CDN中,字体文件的跨域问题和解决 参考文章: (1)CDN中,字体文件的跨域问题和解决 (2)https://www.cnblogs.com/hnsongbiao/p/7449532.html 备忘 ...
- vue中axios访问Java后端跨域问题解决
vue中axios访问Java后端跨域问题解决 参考文章: (1)vue中axios访问Java后端跨域问题解决 (2)https://www.cnblogs.com/soinve/p/9295009 ...
- Vue项目中你是如何解决跨域的呢?
Vue项目中你是如何解决跨域的呢? 一.跨域是什么 跨域本质是浏览器基于同源策略的一种安全手段 同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能 所谓同源( ...
- ajax跨域请求 html5,HTML5中使用postMessage实现Ajax跨域请求的方法
由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等. 常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建 ...
最新文章
- tensorboard scalar图下载失败不完整解决
- python向数据库写入数据_如何用Python向Mysql中插入数据
- Android Apk增量更新
- MFC的框架程序分析3
- 腾讯的一笔画游戏--巧妙解法
- 华为智能家居app未能连接上远程云服务_【InForSec通讯】智能家居云平台实体间交互状态安全分析 | Usenix2019...
- 程序员“离职小技巧”
- java lib_JavaLib
- 上海自考计算机及应用,上海交通大学--计算机及应用(独立本科080901)
- LINUX OpenGL简单测试代码
- Unity移动物体时,当接近目的地时自动吸附
- java车牌号识别EasyPR_EasyPR
- 晶振外匹配电容应该怎样选取
- c语言源代码三角函数大全,【C语言及程序设计】项目2-9-3:编制三角函数表
- 【BZOJ】【3053】The Closest M Points
- html整体页面灰色,让网页整体变灰的方法
- 干货来袭!腾讯T4大佬,十分钟教你用svg做出精美的动画
- [摘录]第3章 终局谈判策略
- 51单片机精确延时设计
- sqlserver数据库可疑解决办法