fetch获取数据 chrome中 network标签 里面数据正常, 控制台输出数据为空?

Question

fetch('https://www.baidu.com', {mode: 'no-cors'}).then(res => res.text()).then(data => console.log(data))

network标签返回正常, 但是为什么输出的数据为空?

把这段代码有什么问题吗?

Answer 1

指定 no-cors，浏览器当初跨域了 res的status已经是0了。

//try this
fetch('https://www.baidu.com', {mode: 'cors'}).then(res => res.text()).then(data => console.log(data))

修订

//try this
fetch('https://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js', {mode: 'cors'})
.then(res => res.text())
.then(data => console.log(data))

因为百度的首页并未返回页面里头，并没有access-control-allow-origin的header，指定cors还是存在跨域，
，会发生资源跨域问题。

• cors
  跨域值，当reponse满足cors时生效，参见HTTP访问控制(CORS)

• no-cors
  同域时候生效，默认值。