请求发送成功，但在使用“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: ""…}

这是一幅画

有人能帮忙吗？我真的很困惑

Answer 1

不能向不支持跨源资源共享(CORS)的外部服务器发出请求。

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

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