fetch没有在ReactJS中提供正确的JSON响应？

Question

我正在尝试在API端点上使用fetch方法，但是我遇到了一些意外错误。我无法在浏览器的控制台中查看JSON数据。

app.js：

import React, { Component } from 'react';
import './App.css';

class App extends Component {

    componentDidMount() {
        fetch('www.flymine.org/query/service/search?q=BRCA1')
            .then(res => res.json())
            .then(res => {
                console.log(res)
            })
    }

  render() {
    return (
      <div>

      </div>
    );
  }
}

export default App;

错误截图：

Answer 1

在网址之前添加协议http://，例如：

componentDidMount() {
        fetch('http://www.flymine.org/query/service/search?q=BRCA1')
            .then(res => res.json())
            .then(res => {
                console.log(res)
            })
    }

Answer 2

目前，您使用的是页面相对网址：www.flymine.org/query/service/search?q=BRCA1。这意味着，如果您执行该提取，则完整的URL将类似于http://localhost:3000/www.flymine.org/query/service/search?q=BRCA1。除非您在端口3000上运行服务器来执行Web请求并返回结果，否则这不是正确的URL。

要使其与协议相关，请将//放在其前面。然后，它将从页面（http或https）获取协议并向其添加//www.flymine.org/query/service/search?q=BRCA1，向我们提供http://www.flymine.org/query/service/search?q=BRCA1或https://www.flymine.org/query/service/search?q=BRCA1。或者在其前面添加http://以使其具体http（因为它们不支持https）：

fetch('http://www.flymine.org/query/service/search?q=BRCA1')
  .then(res => res.json())
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.error(err);
  });

Live Example on JSBin

请注意，如果您在浏览器中执行此操作，则其唯一的原因是它们通过Cross-Origin Resource Sharing专门允许所有来源。如果他们没有，您将被Same Origin Policy阻止。