使用Flask和React的Hello World示例

Question

我已经设置了一个 flask rest API，代码如下：

from flask import Flask
from flask import jsonify
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

@app.route('/', methods=['GET'])
def hello_world():
   return "Hello World"

if __name__ == '__main__':
   app.run()

现在，我也已经设置好了一个React前端。我想做的就是向我的Flask Rest API发出一个GET请求，然后使用console.log输出结果字符串“Hello World”。我遇到了一些CORS问题，所以我添加了这行代码`CORS（app）`，但我仍然有些困扰。

我的fetch请求如下所示...

componentDidMount() {

    fetch('http://localhost:5000/', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
      .then(result=>result)
      .then(item=>console.log(item))
      .catch(e=>{
        console.log(e);
        return e;
      })
}

我收到的结果如下...

Response { type: "cors", url: "http://localhost:5000/", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, bodyUsed: false } App.js:24

我的Hello World字符串没有显示出来。我还注意到我的服务器正在发出一个OPTIONS请求...

127.0.0.1 - - [26/Jul/2018 14:13:54] "OPTIONS / HTTP/1.1" 200 -
127.0.0.1 - - [26/Jul/2018 14:13:54] "GET / HTTP/1.1" 200 -

我觉得这可能是由于我的请求头中的application/json导致的。所以我把它删除了...

fetch('http://localhost:5000/', {
  method: 'GET',
})
  .then(result=>result)
  .then(item=>console.log(item))
  .catch(e=>{
    console.log(e);
    return e;
  })

OPTIONS请求已消失，但我的响应仍然相同。

我似乎无法将字符串传递到前端。我已经不知道我的问题可能是什么了。

- buydadip

Answer 1

在Flask路由中，你可以使用jsonify来返回一个响应对象，而不是返回一个字符串：

return jsonify({"data": "Hello World"})

在React中，您可以调用响应上的json方法，以获取包含数据的JavaScript对象：

.then(result=>result.json())  // instead of .then(result=>result)

您应该在控制台中看到以下内容记录：

{data: "Hello World"}

---

- sjw