Javascript 가져 오기 플라스크 json

Question

그래서 프랭크 서버를 프론트 엔드에 반응하는 앱을 연결하려고합니다. 지금 당장 나는 두 사람 사이에 json을 보낼 수 있는지 확인하려고합니다. 아래는 각각의 코드와 오류에 대한 설명입니다.

이 앱은 내가 (크롬 콘솔)이 오류가

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을 볼 수 있습니다. 구문 분석에서 오류가있는 것 같습니다.

플라스크 구문 오류 (올바르게 전송하지 않음), 자바 스크립트 구문 분석 오류 (예 : 볼 수없는 간단한 실수를하고 있음) 또는 내가 작성한 반응하는 앱 버그 이해하지 못해.

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)