Javascriptフェッチフラスコjson

Question

私はFlaskサーバーをフロントエンドに接続しようとしています。今私はちょうど私が2人の間にjsonを送ることができることを確かめたいと思う。以下はそれぞれのコードとエラーの詳細な説明です。

は、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の[ネットワーク]タブでjsonが表示されますが、解析時にエラーが発生しているようです。

フラスコの構文エラー（正しく送信しない）、javascriptの解析エラー（私が見ることができない簡単な間違いをしている）、または作成した反応のあるアプリのバグ理解していない。

Answer 1

FlaskアプリケーションでCORSが有効になっていない可能性は非常に高いです。 CORSは、Cross Origin Resource Sharingの略で、python webappsが私たちが共有しているかどうか、ブラウザなどを共有することを許可します。とにかく、このようなソリューションが必要です。あなたはエラーが出るん

ターミナル/ 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)