总结-使用CORS解决跨域问题(下)

简介: 对前端来说跨域应该是不陌生的,解决跨域的方案有很多种。而我司前端接口调用也正是CORS的方式,所以难免在联调阶段会遇见一些CORS跨域的问题,下面通过一个简单的demo验证一下CORS解决跨域的过程中,对一些不清楚的知识点做一个简单的总结

第四个参数: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一下,印象会深刻点


参考文献


1、浏览器同源政策及其规避方法


2、跨域资源共享CORS详解


3、如何区分不同用户——Cookie/Session机制详解


4、关于cookie的深入了解

相关文章
|
2月前
|
安全 API PHP
PHP中实现CORS跨域资源共享的方法
通过这种方式,你可以在PHP应用中灵活地实现CORS,以支持跨域Web应用的需求。
217 15
|
7月前
|
人工智能 前端开发 JavaScript
webpack-dev-server代理后端一直报CORS跨域或500错误
在Vue项目中使用Webpack的devServer代理后端接口时,遇到500错误。问题根源在于浏览器请求中携带的Origin头导致服务器报错,而Postman测试正常。通过分析发现,调整或移除Origin头可解决问题。解决办法包括:1) 在代理配置中添加正确的Origin头;2) 删除请求中的Origin头。文章还深入解析了Origin头的作用及changeOrigin配置的实际意义,并附带相关文档链接,帮助开发者更好地理解与解决类似跨域问题。
508 20
|
9月前
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
6256 90
|
JSON 安全 前端开发
浅析CORS跨域漏洞与JSONP劫持
浅析CORS跨域漏洞与JSONP劫持
685 3
|
9月前
|
JSON 缓存 前端开发
对CORS(跨域)的一些见解
CORS(跨域资源共享)是W3C标准,用于解决AJAX跨源请求限制。浏览器与服务器需共同支持CORS,浏览器自动处理请求头,开发者无需额外操作。CORS分为简单请求与非简单请求:简单请求满足特定条件(如方法为GET/POST/HEAD且头信息有限制),浏览器直接发送;非简单请求需先进行“预检”请求(OPTIONS方法),确认服务器允许后才发送实际请求。服务器回应需包含Access-Control-Allow-Origin等字段,以控制跨域访问权限。
222 10
|
开发框架 中间件 Java
如何处理跨域资源共享(CORS)的 OPTIONS 请求?
处理 CORS 的 OPTIONS 请求的关键是正确设置响应头,以告知浏览器是否允许跨域请求以及允许的具体条件。根据所使用的服务器端技术和框架,可以选择相应的方法来实现对 OPTIONS 请求的处理,从而确保跨域资源共享的正常进行。
692 61
|
JSON 前端开发 安全
CORS 是什么?它是如何解决跨域问题的?
【10月更文挑战第20天】CORS 是一种通过服务器端配置和浏览器端协商来解决跨域问题的机制。它为跨域资源共享提供了一种规范和有效的方法,使得前端开发人员能够更加方便地进行跨域数据交互。
|
安全 Java 应用服务中间件
SpringBoot:CORS是什么?SpringBoot如何解决跨域问题?
CORS是Web开发中常见且重要的机制,SpringBoot通过提供注解、全局配置和过滤器等多种方式来解决跨域问题。选择适合的方式可以帮助开发者轻松处理跨域请求,提高应用的灵活性和安全性。
705 2
CORS 跨域资源共享的实现原理是什么?
CORS 跨域资源共享的实现原理是什么?
|
JavaScript 前端开发 API
跨域资源共享(CORS)的工作原理是什么?
跨域资源共享(CORS)通过浏览器和服务器之间的这种交互机制,在保证安全性的前提下,实现了跨域资源的访问,使得不同源的网页能够合法地获取和共享服务器端的资源,为现代Web应用的开发提供了更大的灵活性和扩展性。