目标

我想使用React和Flask创建一个应用程序。
在那之前，先将它们协调起来并尝试进行一些反映。

流程

建立一个Project

我們決定將目錄結構分成前端和後端。
參考文章→https://qiita.com/mihonak/items/91ac9c068831c0a3bb88

启动各种操作

每次看都很帅气对吧

在后端，我们还将从Flask的官方文档中引用源代码并尝试运行。官方文档链接→https://msiz07-flask-docs-ja.readthedocs.io/ja/latest/quickstart.html#a-minimal-application

创建端点

我們將考慮從Python端返回適當的數據值。

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    data = {'name': 'tarou', 'age': 30, 'job': 'developer'}
    return jsonify(data)

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

创建React

我們將創建一個應用程序，從終端點獲取並顯示數據。

import { useEffect, useState } from 'react';
import './App.css';
import axios from "axios";

interface Data {
  name: string;
  age: number;
  job: string;
}

function App() {
  const [data, setData] = useState<Data | null>(null);

  useEffect(() => {
    axios.get('http://127.0.0.1:5000/api/data')
      .then((response) => setData(response.data))
      .catch((error) => console.error(error));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <div>
          {data && (
            <div>
              <p>Name: {data.name}</p>
              <p>Age: {data.age}</p>
              <p>Job: {data.job}</p>
            </div>
          )}
        </div>
      </header>
    </div>
  );
}

export default App;

设置代理

因为调查了一下但只有一点点理解，所以试着问了ChatGPT。

プロキシの設定: このステップはReactとFlaskが同じマシン上の異なるポートで動作するときに重要です。
例えば、Reactは通常ポート3000で、Flaskはポート5000で動作します。

異なるポートから来るリクエストは、セキュリティ上の理由からウェブブラウザによってブロックされる可能性があるため、これは問題となります。

これを解決する方法の1つは、CORS (Cross-Origin Resource Sharing)を設定することですが、これは複雑でエラーが発生しやすいです。

その代わりに、Reactの開発サーバーにプロキシを設定することが推奨されます。
これは、Reactの開発サーバーがFlaskのサーバーに直接リクエストを転送するようにすることです。
これにより、Reactアプリケーションは自分自身が動作しているポート（通常は3000）からリクエストを送り、これがプロキシによってFlaskのポート（通常は5000）に転送されます。
結果として、ウェブブラウザはこのリクエストを同一オリジンからのものとして扱い、問題なくリクエストを許可します。

このプロキシを設定するには、Reactアプリケーションのpackage.jsonファイルにproxyフィールドを追加します。

听说来自不同端口的通信会被视为安全风险而被阻止。
试试用React推荐的方法。

{
  "proxy": "http://127.0.0.1:5000",
}

稍后，我对源代码进行了一些修正，成功地进行了反映。