Fecth 跨域问题

最新推荐文章于 2024-05-07 20:24:01 发布

Qiaer_

最新推荐文章于 2024-05-07 20:24:01 发布

阅读量908

点赞数

CC 4.0 BY-SA版权

文章标签： fecth JavaScript

本文链接：https://blog.youkuaiyun.com/qq_25897137/article/details/70536349

本文探讨了Fetch API中跨域请求时CORS协议与凭据模式的关系。介绍了如何设置请求的凭据模式，以及这对CORS预检请求的影响。服务器开发者需要谨慎处理凭据共享，以防止安全问题。文中提到了`Access-Control-Allow-Origin`、`Access-Control-Allow-Credentials`等关键头部的作用。

CORS协议和凭据

当请求的凭据模式为“ include”时，它对CORS协议的功能有影响，但不包括抓取中的凭据。

在过去，XMLHttpRequest可以将请求的凭据模式设置为“ include”：

var client = new XMLHttpRequest（）
client.open（“GET”，“./”）
client.withCredentials = true
/ * ... * /

现在fetch("./", { credentials:"include" }).then(/* … */)就够了

甲请求的凭证模式是不是在服务器上可观察到的必然; 只有当凭证用于存在请求可以将它凭借的可观察到的证书被包括。请注意，即使如此，CORS-preflight请求也不包括凭据。

因此，服务器开发人员需要决定是否可以共享具有凭据的响应“污点” 。而且还需要决定是否请求迫使一个CORS-预检要求可以包括凭证。一般来说，分享答复和允许具有凭证的请求是相当不安全的，并且必须非常小心以避免混淆的副作用问题。

为了分享回应凭据时，` Access-Control-Allow-Origin`和` Access-Control-Allow-Credentials` 头是很重要的。下表用于说明请求的各种合法和非法组合https://rabbit.invalid/：

请求的凭据模式	` `Access-Control-Allow-Origin``	` `Access-Control-Allow-Credentials``	共享？	笔记
“ `omit`”	` `*``	省略了	✅	-
“ `omit`”	` `*``	` `true``	✅	如果凭据模式不是“ `include`”，那么` `Access-Control-Allow-Credentials``被忽略。
“ `omit`”	`https://rabbit.invalid/`	省略了	❌	序列化的起始点没有尾部斜杠。
“ `omit`”	`https://rabbit.invalid`	省略了	✅	-
“ `include`”	` `*``	` `true``	❌	如果凭据模式是“ `include`”，那么` `Access-Control-Allow-Origin``不能是` `*``。
“ `include`”	`https://rabbit.invalid`	` `true``	✅	-
“ `include`”	`https://rabbit.invalid`	` `True``	❌	` `true``是（字节）区分大小写。