前几天在帮后端排查一个cors的问题的时候发现的一些小坑特此记录

**

cors的本质是出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch
API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非使用CORS头文件。
跨域并非一定是浏览器限制了跨站请求,也有可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了。最好的例子是 CSRF
跨站攻击原理,请求是发送到了后端服务器无论是否跨域!注意:有些浏览器不允许从 HTTPS 的域跨域访问 HTTP,比如 Chrome 和
Firefox,这些浏览器在请求还未发出的时候就会拦截请求。

**

本case场景描述如下:
用户在a.com域名下跨域访问b.com域名下的api接口,使用了XMLHttpRequest的跨域头请求。域名b.com也允许了可以跨域 Access-Control-Allow-Origin 但是很奇怪在访问b.com的接口时有些api能访问成功,有些api访问失败。排查发现访问失败的api都是需要用户的登录态的。但是用户已经在b.com登录过了。把XMLHttpRequest请求换成jsonp请求则都可以请求成功(这好像是废话)。。。由此推测XMLHttpRequest 添加cors头的时候没有把b.com的 用户cookie信息带过去。

翻看MDN文档https://developer.mozilla.org... 找到答案如下:

Fetch 与 CORS 的一个的特性是,可以基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言,对于跨域 XMLHttpRequest 或 Fetch 请求,浏览器不会发送身份凭证信息。如果要发送凭证信息,需要设置 XMLHttpRequest 的某个特殊标志位。

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/'; function callOtherDomain(){
if(invocation) {
invocation.open('GET', url, true);
invocation.withCredentials = true;//这个是重点
invocation.onreadystatechange = handler;
invocation.send();
}
}

将 XMLHttpRequest 的 withCredentials 标志设置为 true,从而向服务器发送 Cookies。服务器端的响应需要携带 Access-Control-Allow-Credentials: true ,浏览器才会把响应内容返回给请求的发送者。

另外需要注意的是
对于附带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为“”。 这是因为请求的首部中携带了 Cookie 信息,如果 Access-Control-Allow-Origin 的值为“”,请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http://foo.example,则请求将成功执行。

tips:
在跨域访问时,XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头,Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma,如果要访问其他头,则需要服务器设置本响应头Access-Control-Expose-Headers 头让服务器把允许浏览器访问的头放入白名单,例如:

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

其他详细信息见我的博客

HTTP访问控制(CORS)踩坑小记的更多相关文章

  1. Ubuntu 16.04 安装Mysql 5.7 踩坑小记

    title:Ubuntu 16.04 安装Mysql 5.7 踩坑小记 date: 2018.02.03 安装mysql sudo apt-get install mysql-server mysql ...

  2. MySql 踩坑小记

    MySql 踩坑一时爽,一直踩啊一直爽...   以下记录刚踩的三个坑,emmm... 首先是远程机子上创建表错误(踩第一个坑),于是将本地机器 MySql 版本回退至和远程一致(踩第二个坑),最后在 ...

  3. dubbo 2.7应用级服务发现踩坑小记

    本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 背景 本文记录最近一位读者反馈的dubbo 2.7.x中应用级服务发现的问题,关于dubbo应 ...

  4. async语法升级踩坑小记

    从今年过完年回来,三月份开始,就一直在做重构相关的事情. 就在今天刚刚上线了最新一次的重构代码,希望高峰期安好,接近半年的Node.js代码重构. 包含从callback+async.waterfal ...

  5. 支付宝使用流程和踩坑小记(附Demo)

    # 支付宝使用整理 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym, ...

  6. Guava Lists.transform踩坑小记<转>

    1.问题提出 1.前段时间在项目中用到Lists.transform返回的List,在对该list修改后发现修改并没有反映在结果里,研究源码后发现问题还挺大.下面通过单步调试的结果来查看Guava L ...

  7. 修改ranger ui的admin用户登录密码踩坑小记

    修改的ranger ui的admin用户登录密码时,需要在ranger的配置里把admin_password改成一样的,否则hdfs的namenode在使用admin时启动不起来,异常如下: Trac ...

  8. Jquery AJAX使用踩坑小记

    在使用jquery ajax时,如果其参数是一个json对象,将此参数使用$('#dd').data(param)绑定到一个元素上, 在使用$('#dd').bind('click',function ...

  9. flutter踩坑小记:The number of method references in a .dex file cannot exceed 64K.

    The number of method references in a .dex file cannot exceed 64K. 这句话的意思翻译出来是:.dex文件中的方法引用数不能超过64K. ...

随机推荐

  1. noip2013day1-货车运输

    题目描述 \(A\)国有\(n\)座城市,编号从 \(1\)到\(n\),城市之间有 \(m\) 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 \(q\) 辆货车在运输货物, 司机们想知 ...

  2. python-day1(学前了解)

    Markdown基本语法 各级标题 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 加粗 **加粗文本** 斜体 *我斜了* 高亮 ==我高亮了== 上标 2 ...

  3. vue.js之过渡动画

    vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...

  4. WebSocket的使用(基于VUE与SpringBoot)

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 We ...

  5. Jquery复习(七)之尺寸

    jQuery 尺寸 方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHei ...

  6. 运维nslookup语法

    nslookup 查询域名DNS信息的工具 补充说明 nslookup命令 是常用域名查询工具,就是查DNS信息用的命令. nslookup4有两种工作模式,即“交互模式”和“非交互模式”.在“交互模 ...

  7. splice方法

    此方法有三种用法: 第一种: 删除功能  返回删除内容 索引从0开始 var arr = [1,2,3,4]; var arr2 = arr.splice(0,2); arr2 ===> [1, ...

  8. kali 下安装 vmtools

    网上的教程都是默认路径下的,kali是定制版本的,路径不同,所以首先要找到media下安装包的路径,然后进入该路下,将安装包复制到想要的路径下,并解压缩到想要的路径下,剩下的就跟网上的差不多了,即找到 ...

  9. initlocation - 创建一个从属的 PostgreSQL数据库存储区

    SYNOPSIS initlocation directory DESCRIPTION 描述 initlocation 创建一个新的PostgreSQL从属数据库存储区.参阅 CREATE DATAB ...

  10. Linux20期学习笔记 Day4

    环境变量.常用系统变量:vim编辑器使用方法及实验:shell脚本两个层次 内置参数及相关实验