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

目前，您使用的是页面相对 URL：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 阻止。