Javascript fetch flask json

Question

Так что я пытаюсь подключить 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) 

Я получаю эту ошибку (в хромированной консоли) -

Неожиданный конец ввода (...)

Я вижу json на вкладке «Сети» в Chrome, похоже, что это ошибка при разборе.

Закрепленный вопрос о том, является ли это ошибкой синтаксиса фляжки (т. Е. Не отправляет ее правильно), ошибка синтаксического анализа javascript (т. Е. Я делаю какую-то простую ошибку, которую я не вижу) или создать ошибку приложения, 'Т понять.

Answer 1

У вас, скорее всего, нет CORS в вашем приложении «Колба». CORS означает Cross Origin Resource Sharing, который позволяет веб-приложениям python сказать, что мы общаемся с браузером или каким-либо другим. В любом случае решение должно быть примерно таким.

В терминале/Баш $ 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)