CORS(跨域)请求总结和测试
一、简单请求与非简单请求
跨域请求分为简单与非简单请求,同时满足以下两种条件的可以确定为简单请求。 简单请求的请求方法
请求方法 | 说明 |
head | 发送头部信息 |
get | |
post |
简单请求的HTTP头信息
http头信息 | 说明 |
accept | 指定客户端可以接受哪类信息,eg: image/git |
accept-language | 指定客户端可以接受的自然语言,如果没有指定,认为各语言都可以。eg:accept-language: zh-cn |
content-language | 描述实体报头和资源所用的自然语言。没有设置该规则认为实体内容将提供给所有的语言阅读 |
Last-Event-ID | 最后一次接收到事件的标识符 |
content-type | 实体报文和资源的类型,只限于三个值:application/x-www-form-unlencoded、multipart/form-data、text/plain |
二、简单请求处理原理
请求头 | 说明 |
Access-Control-Allow-origin | 指定可以跨域访问的网站,可以设置为*,表示所有res.setHeader("Access-Control-Allow-origin","http://localhost") |
Access-Control-Allow-Credentials | 有这个头或者值为true,表示可接受跨域的cookies。而withCredentials是客户端设置是否传递cookies到服务器。 |
Access-Control-Expose-Headers | 默认cors请求。客户端的xmlHttpRequrest只能拿到Cache-Control、Content-Language、Content-Type、Exprise、Last-Modified、Pragma等6个字段,其他头就需要通过Access-Control-Expose-Headers来指定 |
注意事项
- 设置了Access-Control-Allow-Credentials为true,或者有这个头,那么Access-Control-Allow-Origin就不能用*。
- 发送cookie时,Access-Control-Allow-Origin不能为*,cookie依然同源,只有服务器域名设置的cookie才会上传的。
- 原网页代码中的document.cookie也无法读取服务器域名下的cookie(客户端),通过xmlHttp.getResponseHeader("set-cookies")也不可以的。
- xmlHttp可以获取到foo、boo对象
res.setHeader("Access-Control-Allow-origin","*"); res.setHeader("Access-Control-Expose-Headers", "foo,boo"), res.setHeader("foo", "foo"); res.setHeader("boo", "boo");
三、非简单请求处理原理
如果请求方法是PUT、DELETE,或者Content-type的类型为applicetion/json的。非简单请求两大步骤:
- 预验证“请求”,浏览器会发送请求方法为options的请求,然后会带上如下三个头
头部名称 | 说明 |
Origin | 表示发送请求发送的源域名 |
Access-Control-Request-Method | 需要跨域执行的请求方法(也可以叫动作) |
Access-Control-Request-Headers | 指定cors请求会额外发送的头部信息,给客户端自定义头部的机会 |
- 服务判断是否指定了Access-Control-Allow-Origin头,并且值是可匹配的,验证通过则输出信息如下头部内容:
头部名称 | 说明 |
Access-Control-Allow-Methods | 表明服务器支持的cors请求方法,多个用逗号隔开 |
Access-Control-Allow-Headers | 如果请求有了Access-Control-Request-Headers头,必须返回此头,表明服务器支持的所有头部信息,多个用逗号隔开 |
Access-Control-Allow-Credentials | 与简单请求一致 |
Access-Control-Max-Age | 指定本次预验证的有效期,单位:秒 |
注意:
- Access-Control-Request-Headers和Access-Control-Request-Method不需要开发者来设置,这是浏览器自动识别的.Access-Control-Request-Headers根据请求的自定义头生成,而Access-Control-Request-Method根据请求的方法生成。
- headers设置不对的表现:
3. 正确的设置:
四、跨域cookie的处理(不行)
- 跨域是设置不了cookie的。服务端输出的cookie无效
- ajax获取set-Cookies头(客户端),会提示错误
1. 随笔为作者自己经验以及学习的总结;
2. 如本文对您有帮助请移步右下角,推荐本文,先谢谢各位看官,因为您的支持是我最大动力;
3. 欢迎大家转载本文;
2. 如本文对您有帮助请移步右下角,推荐本文,先谢谢各位看官,因为您的支持是我最大动力;
3. 欢迎大家转载本文;
分类:
Html
, Javascript
标签:
Javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库