Fecth 跨域问题

本文探讨了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`是(字节)区分大小写。

类似地,当请求凭据模式不是“ ” 时,` Access-Control-Expose-Headers`,` Access-Control-Allow-Methods`和` Access-Control-Allow-Headers`响应头只能使用` *`作为值。include

<think>好的,我现在需要处理用户关于Fetch的问题。用户可能想了解Fetch API的使用方法,但他们的引用内容里提到了一些技术细节,比如对比XHR、发送请求的方式、返回格式、中断请求和获取进度等。首先,我需要确认用户的具体需求,可能他们想了解Fetch的基本用法或者更深入的功能。 根据系统指令,我需要使用中文回答,确保数学表达式正确,生成相关问题,并引用提供的参考文献。用户提供的引用1和引用2提到了Fetch的基本使用、对比XHR、GET和POST请求、中断请求和进度获取。这些信息足够构建一个结构清晰的回答。 首先,我应该从Fetch的基本介绍开始,对比传统的XMLHttpRequest,突出其优势,比如基于Promise和更简洁的语法。然后,分点讲解基本使用,包括GET和POST请求的示例代码,中断请求的方法,以及如何获取请求进度。每个部分都需要引用对应的文献,确保信息的准确性。 接下来,生成相关问题时要围绕Fetch的不同方面,比如优缺点、错误处理、流式数据处理、与Axios的对比以及浏览器兼容性。这些问题能帮助用户进一步探索相关主题。 需要检查是否有拼写错误,确保代码示例正确,符合用户提供的引用内容。同时,保持回答结构清晰,分步骤说明,让用户容易理解。最后,确认所有引用标识正确添加,格式符合要求。</think>### Fetch API 详解 Fetch API 是浏览器提供的网络请求接口,基于 Promise 实现,比传统 XMLHttpRequest 更简洁高效[^1]。以下是核心功能说明: #### 1. 基础用法 ```javascript // GET 请求示例 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); // [^2] ``` #### 2. 请求配置 ```javascript // POST 请求示例 fetch('https://api.example.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: 'test', age: 25 }) }); ``` #### 3. 中断请求 通过 AbortController 实现请求中止: ```javascript const controller = new AbortController(); fetch('https://api.example.com/file', { signal: controller.signal }) .then(response => {/* 处理响应 */}) .catch(err => { if (err.name === 'AbortError') { console.log('请求已取消'); } }); // 取消请求 controller.abort(); // [^1] ``` #### 4. 进度监控 ```javascript fetch('https://api.example.com/large-file') .then(response => { const reader = response.body.getReader(); let receivedLength = 0; function processData({ done, value }) { if (done) { console.log('下载完成'); return; } receivedLength += value.length; console.log(`已接收 ${receivedLength} 字节`); return reader.read().then(processData); } return reader.read().then(processData); }); // [^1] ``` 相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值