反应不读取从烧瓶 GET 端点返回的 json

Question

我正在尝试获取从 url 返回的数据。卷曲到 url 结果如下：

[{"name": "Hello World!"}]

以下是我的 App.js 中的代码

import React, { Component } from 'react';
import Contacts from './components/contacts';


class App extends Component {
  render() {
    return (
      <Contacts contacts={this.state.contacts} />
  )
  }
  state = {
    contacts: []
  };

  componentDidMount() {
    fetch('url')
    .then(res => res.json())
    .then((data) => {
      this.setState({ contacts: data })
    })
    .catch(console.log)
  }

}

export default App;

我的 contact.js 包含以下内容：

// src/components/contacts.js

import React from 'react'

const Contacts = ({ contacts }) => {
    return (
    <div>
        <center><h1>Contact List</h1></center>
        {contacts.map((contact) => (
        <div class="card">
            <div class="card-body">
            <h5 class="card-title">{contact.name}</h5>
            </div>
        </div>
        ))}
    </div>
    )
};

export default Contacts

数据不会被呈现或记录。我获取它的方式有问题吗？

编辑：该问题与 CORS 相关。不知道为什么使用flask_cors 不能解决它。我的服务器看起来像：

from flask import Flask, request, json
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route("/")
def home():
    return json_response([{"name":"Hello World!"}])

def json_response(payload, status=200):
     return (json.dumps(payload), status, {'content-type': 'application/json'})