技术标签: jQuery html5 跨域 JavaScript ajax AJAX
A.abc.com 发起一个到 abc.com/B 的ajax请求,也会有跨域的问题。之所以会有跨域问题,实则是因为www.abc.com其实同A.abc.com一样,也是一个二级域名,而非一级域名(一级域名是http://abc.com)。
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.jshttp://www.a.com/b.js | 同一域名下 | 允许 |
http://www.a.com/lab/a.jshttp://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.jshttp://www.a.com/b.js | 同一域名,不同端口 | 不允许 |
http://www.a.com/a.jshttps://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
http://www.a.com/a.jshttp://170.32.82.74/b.js | 域名和域名对应ip | 不允许 |
http://www.a.com/a.jshttp://script.a.com/b.js | 同一域名,不同二级域名 | 不允许 |
http://www.a.com/a.jshttp://a.com/b.js | 二级域名和一级域名 | 不允许(cookie这种情况下也不允许访问) |
http://www.b.com/a.jshttp://www.a.com/b.js | 不同域名 | 不允许 |
对于是否允许跨域,更详细的说明可以看下表:
有了对跨域的基本概念了解后,就可直接进入这篇文章的主题了。
赞助商链接
解决方法:
若在接收请求的服务端abc.com/B页面用的是php语言,则在页面中加入:
// 指定可信任的域名来接收响应信息,推荐
<?php header('Access-Control-Allow-Origin:http://A.abc.com'); ?>
或加入
// 使用通配符 * ,表示当前服务端通话任何域名发起请求,不推荐
<?php header('Access-Control-Allow-Origin:*'); ?>
就这样在服务端简单加一句响应头responese headers声明,一个跨域请求就不会被浏览器的同源安全策略所阻止了!
用chrome调试工具Network ajax请求查看面板中可以看到,类似如下截图:cors
需要注意的是:
添加响应头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,还得继续补增响应头:
<?php header('Access-Control-Allow-Credentials:true'); ?>
需要将 XMLHttpRequest 对象的 withCredentials 属性设置为 true,JQuery1.5.1+ 就开始提供了相应的字段,使用方式如下:
$.ajax({
url:"B.abc.com",
xhrFields:{
withCredentials:true
},
crossDomain:true
});
哦也~ 收到 Cookie 了。
设置 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,重启浏览器即可
文章浏览阅读170次。创建扩展对象实例from flask_login import LoginManagerlogin_manager = LoginManager()login_manager.login_view = 'auth.login'# 上面这一句是设置登录视图的名称,如果一个未登录用户请求一个只有登录用户才能访问的视图,# 则闪现一条错误消息,并重定向到这里设置的登录视图。# 如果未设置..._python flask please log in to access this page
文章浏览阅读428次。Vue中document.body.scrollTop的值总为零的解决办法最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0但是发现document.body.scrollTop一直是0。查资料发现是DTD的问题。页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。页面没有DTD,即没指定DOCTYPE时,使用d..._滚动给scrolltop赋值
文章浏览阅读2.1k次,点赞25次,收藏21次。人大金仓数据库管理系统KingbaseES(简称:金仓数据库或KingbaseES)是北京人大金仓信息技术股份有限公司自主研制开发的具有自主知识产权的通用关系型数据库管理系统。_kingbase
文章浏览阅读1.2w次,点赞20次,收藏156次。ctions 选项用来定义事件处理方法,用于处理 state 数据。actions 类似于 mutations,不同之处在于 actions 是异步执行的,事件处理函数可以接收 {commit} 对象,完成 mutation 提交,从而方便 devtools 调试工具跟踪状态的 state 变化。..............._vue笔试题
文章浏览阅读1.1w次,点赞2次,收藏23次。isis是一种与ospf很相似的网络协议(属于动态路由协议),它被应用在巨大规模网络,如运营商以及银行等。同样的它也是基于链路状态算法,支持clnp网络,ip网络。与ospf不同的是,它是基于数据链路层报文传输,而ospf则是在ip层进行计算。它可以自动的发现远程网络,只要网络拓扑结构发生了变化,路由器就会相互交换路由信息,不仅能够自动获知新增加的网络,还可以在当前网络连接失败时找出备用路径。无类..._isis协议配置
文章浏览阅读1.9k次。名称:Proxychains – 通过代理服务器进行连接语法:proxychains 描述:这个程序会强制所有使用特定tcp连接的客户端所引起的TCP连接走代理通道。它是一种跳板程序。这个软件和sockscap、premo、eborder异曲同工。2.0版支持SOCKS4、SOCKS5、HTTP类的代理。认证方法:socks-“user/pass”,http-“basic_proxychains是什么
文章浏览阅读3.7k次,点赞2次,收藏7次。本篇主要内容如下:8.1 触发器类型8.1.1 DML触发器8.1.2 替代触发器8.1.3 系统触发器8.2创建触发器8.2.1 触发器触发次序8.2.2 创建DML触发器8.2.3 创建替代(INSTEAD OF)触发器8.2.3 创建系统事件触发器8.2.4 系统触发器事件属性8.2.5 使用触发器谓词8.2.6 重新编译触发器8.3删除和使用触发器8.4触发器和数据字典8.5数据库触发器的应用举例8.6 触发器的查看8...._用oracle创建一个instead of触发器,当在course表中删除数据,不允许在course表
文章浏览阅读188次。本科毕业论文(设计)题 目 基于web的网上书店学生姓名专业名称 计算机科学与技术指导教师目录1、引言52、系统概述62.1概述62.2 开发平台73.需求分析73.1总体需求描述73.2系统总体功能图73.3系统需要实现的功能83.4业务流程图94.详细设计114.1数据库详细设计114.2建立数据库124.3页面详细设计:185用户手册225.1普通用户:225.2管理员:24参考文献3..._计算机科学与技术毕业设计网上书店
文章浏览阅读1.6k次。Description输入一个正整数N和N个正整数,统计其中素数的和。Input输入一个正整数N(1≤N≤100)和N个正整数(≥3),用空格分隔。Output输出所有素数,用空格隔开;再输出这些素数和。Sample Input10 4 5 8 12 13 24 34 37 20 885 1 5 8 12 13Sample Output5 13 37 s=555 13 s=..._输入一个正整数n和n个正整数,统计其中素数的和。
文章浏览阅读2.5k次。归档备份:概念归档备份:概念 如果需要在指定时间内保留联机备份,RMAN 通常会假定用户可能需要在自执行该备份以来到现在之间的任意时间执行时间点恢复。为了满足这一要求,RMAN 会在此时段内保留归档日志。但是,可能仅需要在指定的时间(如两年)内保留特定备份(并使其保持一致和可恢复)。用户不打算恢复到自执行该备份以后的某一时间点,只是希望能够正好恢复到执行该备_rman 备份 生成两个文件
文章浏览阅读9.3k次,点赞9次,收藏58次。引言调试能力是一个程序员的生存根本,可是很多初学者却忽视调试。今天我们就来讨究一下JS的调试技巧。本文章将会详细列举JS相关的各种实用调试技巧。如果您是JS的初学者,那么这篇文章将对您有很大的帮助。为什么要调试?程序就是函数堆砌起来的,程序的运行就是函数的执行过程。而通过JS调试,我们可以更为直观的追踪到在程序运行中,函数的执行顺序,以及各个参数的变化。这样我们就可以快速的定位到问题所在。1. 什么是JS调试?在程序运行中,我们总会遇到各种bug,而通过代码的追踪代码的运行顺序从而定位到问题的过_js断点调试
文章浏览阅读1k次。记录一次kafka内存溢出,消费慢_kafka消费导致内存泄露