4

所以我正在尝试将 Flask 服务器连接到前端创建反应应用程序。现在我只想验证我可以在两者之间发送 json。下面是每个错误的代码以及更多关于错误的描述。

创建 React App 获取

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

export default class App extends Component {
  constructor() {
    super()

    this.state = {
      pyResp: []
    }
  }

 fetchHelloWorld() {
    console.log("fetching python localhost");
    fetch('http://localhost:5000/', {
      method: 'GET',
      mode:'no-cors',
      dataType: 'json'
    })
      .then(r => r.json())
      .then(r => {
        console.log(r)
        this.setState({
          pyResp: r
        })
      })
      .catch(err => console.log(err))
  }

  render() {
    return (
      <div className="App">
        <h1>Blockchain Voter</h1>
        <p>
          {this.state.pyResp}
        </p>
        <button onClick={() => this.fetchHelloWorld()}>Python</button>
      </div>
    );
  }
}

烧瓶服务器

from flask import *
from json import *

app = Flask(__name__)

@app.route('/')
def hello_world():
    jsonResp = {'jack': 4098, 'sape': 4139}
    print(jsonify(jsonResp))
    return jsonify(jsonResp)

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

我收到此错误（在 chrome 控制台中）-

输入意外结束（…）

我可以在 Chrome 的 Networks 选项卡中看到 json，它似乎在解析时出错。

坚持这是一个烧瓶语法错误（即没有正确发送它），一个javascript解析错误（即我犯了一些我看不到的简单错误），还是一个我不明白的创建反应应用程序错误。

4

1 回答 1

11

您很可能没有在 Flask 应用程序中启用 CORS。CORS 代表跨域资源共享，它允许 python webapps 说 OK 我们共享或浏览器或其他任何东西。无论如何，解决方案应该是这样的。

在终端/bash$ pip install -U flask-cors

在您的应用中

from flask import *
from json import *
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

@app.route('/')
def hello_world():
    jsonResp = {'jack': 4098, 'sape': 4139}
    print(jsonify(jsonResp))
    return jsonify(jsonResp)

if __name__ == '__main__':
    app.run(debug=True)
于 2016-12-01T18:53:40.720 回答