请求已成功发送，但 return 使用 'fetch' 时出现空承诺

Question

我使用 React 和 fetch 来发送这样的请求：

fetch(`http://www.bilibili.com/index/catalogy/1-3day.json`,{
        mode: "no-cors"
    }).then(r => r.json()).then(r => {
        console.log(r);
    }).catch(err => {console.log(err);})

并且响应就在网络选项卡中

但它抛出一个错误：

SyntaxError: Unexpected end of input
at SyntaxError (native)
at http://127.0.0.1:8888/js/video.bundle.js:30174:15

当我尝试记录承诺时，它似乎是一个奇怪的对象：

Response {type: "opaque", url: "", status: 0, ok: false, statusText: ""…}

this is the picture

有人可以帮忙吗？我真的对此感到困惑

Answer 1

您不能向不支持 cross origin resource sharing (CORS) 的外部服务器发出请求。

通过在请求上设置 no-cors 模式，您可以明确地告诉服务器发出副作用请求，但不能访问其内容。这类似于当您从第三方站点将 <img> 标记放入 HTML 并且无法访问其内容时 - 它对调用代码是不透明的。

您需要在服务器端下载 json，然后从您自己的服务器提供它以避免出现此问题。

请求已成功发送，但 return 使用 'fetch' 时出现空承诺

Request were sent successfully,but return an empty promise when use 'fetch'

javascript

promise

cors

fetch-api