在react[duplicate]中使用fetch API时输入意外结束

Question

我使用fetch简单地从虚拟apiendpoint获取数据，但当我在fetch函数中添加配置时，我得到了一个意外的输入错误结束。

这工作得很好，控制台记录了200个项目的数组

componentDidMount() {
    let url = 'https://jsonplaceholder.typicode.com/todos';
    let config =  {
      method: "GET",
      mode: "no-cors",
      headers: {
        "access-control-allow-origin" : "*",
        "Content-type": "application/json; charset=UTF-8",
        "access-control-allow-headers": "content-type"
      }
    };


    fetch(url)
      .then(res => res.json())
      .then(data => this.setState({ data, }))

}

但当我将configs作为参数添加时，它会显示和错误。

componentDidMount() {
    let url = 'https://jsonplaceholder.typicode.com/todos';
    let config =  {
      method: "GET",
      mode: "no-cors",
      headers: {
        "access-control-allow-origin" : "*",
        "Content-type": "application/json; charset=UTF-8",
        "access-control-allow-headers": "content-type"
      }
    };


    fetch(url, config)   // This is where the error occurs
      .then(res => res.json())
      .then(data => this.setState({ data, }))

}

错误：

Dashboard.jsx:35 Uncaught (in promise) SyntaxError: Unexpected end of input
    at Dashboard.jsx:35

和

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://jsonplaceholder.typicode.com/todos with MIME type application/json.

Answer 1

首先，将模式：“无cors”更改为方式：“cors”

关于CORS问题

您需要在您试图请求信息的服务器上更新CORS头。这些CORS政策是出于安全目的而制定的

如果您可以访问它，请添加以下标题:

'Access-Control-Allow-Origin: *'

或

'Access-Control-Allow-Origin: http://example.com'