第四个参数:Access-Control-Expose-Headers
作用:允许浏览器端能够获取相应的header值
如果服务端接口设置了响应头字段res.setHeader('serve-header','from->express');
但是CORS中对应的字段Access-Control-Expose-Headers并没有处理,此时通过请求响应后的header结果如下:
可以看到虽然响应头里面有serve-header
字段,但是却获取不到, 如果设置了 Access-Control-Allow-Headers: serve-header
再来看下结果
此时则可以拿到服务端设置的响应头里面的serve-header
字段了
第五个参数:Access-Control-Max-Age
作用:控制发送预检请求options的频率
1、如果设置Access-Control-Max-Age: 0
, 则发送请求的时候浏览器始终都会先发送预检请求options。如图
每次点击send cors按钮请求接口 api/getcors
时,都会发送options预检请求
2、如果设置Access-Control-Max-Age: 1800
, //预请求缓存30分钟=1800秒 结果如下:
对应的响应头:
点击send cors按钮请求接口 api/getcors
时,只会首次发送options预检请求,接着后面再次请求时就不会发options请求了
3、在2的基础上,如果你的Chrome浏览器在debug状态,勾选上Disable cache,也是失效的 如下:
即每次都会发送预检请求
4、这里强调一下Access-Control-Max-Age:1800
设置缓存时间,仅仅是针对已经请求过的接口如api/getcors
,当点击按钮send cors2 第一次请求接口api/getcors2
时,同样也会发送预检请求options
第六个参数:Access-Control-Allow-Methods
作用:请求方法的限制
这里最后一个参数就留给读者你去校验了,修改下Access-Control-Allow-Methods 参数看看浏览器的报错结果,体会一下...
到这里6个参数就总结完了,下面补充一下CORS跨域时,cookie的携带过程
CORS跨域中cookie的携带
首先Cookie操作具有不可跨域特性,如:
// client 端设置 Cookies.set('cookie-value', '1', { domain: 'huoyun-test.djtest.cn' }); Cookies.set('cookie-value', '2', { domain: 'test.djtest.cn' }); Cookies.set('cookie-value', '3', { domain: 'djtest.cn' }); // server 端设置 res.setHeader('Set-Cookie', 'cookie-value=22;domain=.test.djtest.cn;path=/');
打开chrom调试工具:如下
即:页面huoyun-test.djtest.cn
不可以操作test.djtest.cn
的cookie,通过document.cookie读取的时候是可以获取到从一级域名djtest.cn
及以下的所有子域的cookie值,而在面板中是看不见服务端设置的cookie-value=22;domain=.test.djtest.cn;path=/
的值,这里注意下!!!
那此时再请求接口api/getcors
,服务端接受到的cookie值以哪个为准呢 ? 如下:
即:最终解析到的cookie会以client端一级域名设置的值Cookies.set('cookie-value', '3', { domain: 'djtest.cn' });
为准
最后
对于express中间件cors、以及cookie-parser的解析代码都不复杂,想了解的同学,欢迎clone demo下来debug一下,印象会深刻点
参考文献
3、如何区分不同用户——Cookie/Session机制详解