Why fetch return a response with status = 0?(为什么 fetch 返回 status = 0 的响应?)
问题描述
我想使用 fetch API 从 URL 获取整个 HTML 文档.
I want to use fetch API to get a whole HTML document from URL.
let config = {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': 'text/html',
'Accept-Language': 'zh-CN',
'Cache-Control': 'no-cache'
},
mode: 'no-cors'};
fetch('http://www.baidu.com', config).then((res)=> {
console.log(res);}).then((text)=> {});
当我在 chrome 中运行代码时,它会触发一个请求并在 chrome 网络选项卡中返回 html.但是 fetch res 返回:
When I run the code in chrome, It triggers a request and returns html in the chrome network tab. but fetch res return:
为什么状态为 0,我怎样才能获得像 chrome 网络中的那样正确的 res ?
Why status is 0 and how can I get the correct res like the one in the chrome network ?
推荐答案
关于no-cors
config.mode
的一部分:
no-cors — 防止方法成为 HEAD、GET 或 POST 以外的任何方法.如果任何 ServiceWorkers 拦截了这些请求,它们可能不会添加或覆盖除这些之外的任何标头.此外,JavaScript 可能不会访问结果响应的任何属性.这可确保 ServiceWorker 不会影响 Web 的语义,并防止因跨域泄露数据而引起的安全和隐私问题.
no-cors — Prevents the method from being anything other than HEAD, GET or POST. If any ServiceWorkers intercept these requests, they may not add or override any headers except for these. In addition, JavaScript may not access any properties of the resulting Response. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.
实际上,您通过发出此类请求(将 no-cors
指定为模式)得到的响应将不包含有关请求是成功还是失败的信息,从而使状态代码为 0.您的 fetch
调用中的 mode
将显示 CORS 实际上已失败.
Effectively, the response you get from making such a request (with no-cors
specified as a mode) will contain no information about whether the request succeeded or failed, making the status code 0. Removing mode
from your fetch
call will show that the CORS had in fact failed.
要了解 0 在您的特定情况下的含义,请查阅其他 SO 答案.
To find out what 0 means in your particular case, consult other SO answers.
这篇关于为什么 fetch 返回 status = 0 的响应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:为什么 fetch 返回 status = 0 的响应?
基础教程推荐
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 直接将值设置为滑块 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01