Python 在 React/Flask 项目中没有被调用（？）

Posted 2023-02-25

【中文标题】Python 在 React/Flask 项目中没有被调用（？）

【英文标题】：Python not getting called(?) in React/Flask Project

【发布时间】：2020-11-23 01:51:47

【问题描述】：

总结：我正在尝试使用大流行期间手头的工具自学 Flask 和 React。由于缺少用于远程文件的良好 React 编辑器，我受到了阻碍，我怀疑我可能没有看到这样的编辑器向我显示的错误消息，并且我怀疑我试图调用的 python 脚本永远不会被触及。

非常感谢任何帮助，包括如何更好地查看错误消息或可能配置错误的内容。

我有什么：

Ubuntu 18.04 容器的仅命令行界面。这意味着：没有远程桌面、没有 GUI、没有专门的反应编辑器。我对此无能为力。

React 服务器在容器端口 3000 上启动并运行，外部世界可以通过此问题的路径前缀和 answer 访问。这意味着，我可以从文本终端命令行运行 react，在另一个窗口中使用 vi 编辑 react 项目文件，从系统外部将浏览器指向它并且它可以工作。

Flask 服务器在容器端口 3001 上启动并运行（端口 5000 已经在做其他事情）和配置了端口 3001 作为代理的 React 服务器。上帝帮助我，我正在使用DANGEROUSLY_DISABLE_HOST_CHECK 选项来让它工作。没有特别考虑端口前缀或端口转发——这似乎都是容器内部的，所以我不认为任何特殊处理是必要的。

根据this site 的教程项目。我将在下面包含两个相关的代码文件。

这样的结果是：

在我调用 react 和 flask 服务器的任何一个终端中都没有错误。

网页显示，但不正确：该页面没有显示正确的时间，而是仅显示我预加载到 currentTime 中的任何内容。

我对 python 脚本是否一直在运行高度怀疑：如果我用严重的语法错误破坏 api.py 文件......行为没有变化。如果我用错误破坏 App.js，系统就会死机。如果我用fetch('/garbage').then... 而不是fetch('/time').then... 的特定错误来破坏App.js，仍然没有错误，我觉得非常可疑。

这让我觉得我可能没有看到一些严重的错误或警告消息。

我怀疑这可能是某种类型的 CORS 问题，但 two attempts 在调整该问题的解决方案时失败了。

来自 App.js 的代码：

import React,  useState, useEffect  from 'react';
import logo from './logo.svg';
import './App.css';

function App() 
  const [currentTime, setCurrentTime] = useState(2);

  useEffect(() => 
    fetch('/time').then(res => res.json()).then(data => 
      setCurrentTime(data.time);
    );
  , []);

  return (
    <div className="App">
      <header className="App-header">
        <img src=logo className="App-logo"  />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <p>The current time is currentTime.</p>
      </header>
    </div>
  );


export default App;

来自 api.py 的代码（不包括 CORS 尝试）：

import time
from flask import Flask

app = Flask(__name__)

@app.route('/time')
def get_current_time():
    return 'time': time.time()

---

更新：

在this answer 的建议下，我添加了一些控制台日志语句，并查看了 Chrome 中的控制台日志记录。

App.js:11 GET http://<CORRECT_ADDRESS>/time 404 (Not Found)
(anonymous) @ App.js:11
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164

注1：不包括3001端口，这似乎是错误的。 注2：路径前缀不包括在内，看起来是正确的。

我本来希望这是： App.js:11 GET http://<CORRECT_ADDRESS>:3001/time

如果需要在该调用中包含端口而不是路径前缀，我该如何安排？

Flask 运行在 3001 端口，package.json 的最后一行是：

"proxy": "http://localhost:3001"

---

进一步更新：

现在使用 fetch('http://<CORRECT_ADDRESS>:3001/time') 会产生以下控制台错误：

WebSocket connection to 'ws://<CORRECT_ADDRESS>/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 404
The development server has disconnected.
Refresh the page if necessary.
GET http://<CORRECT_ADDRESS>:3001/time net::ERR_CONNECTION_TIMED_OUT
Uncaught (in promise) TypeError: Failed to fetch

因此，现在 GET 似乎格式正确，但由于 WebSockets 调用失败而超时，该调用可能格式正确，也可能格式不正确。

【参考方案1】：

您可能会看到一个无限循环，其中状态没有机会更新。

试试这个：

@app.route('/time')
def get_current_time():
    print( time.time() )
    return 'time': time.time()

/time 获得点击了吗？因为您的useEffect() 代码将在每次状态更改时运行，也就是每次运行时：无限循环。

如果/time 没有被点击，那么你的问题出在那个相对路径上。试试这个：

useEffect(() => 
    console.log('fetching');
    fetch('/time').then(res => res.json()).then(data => 
        console.log('fetched:' + data);
        setCurrentTime(data.time);
    );
  , []);

接下来，检查您的端口。听起来你可能在 3001 上运行 React/Webpack，而在 5000 上运行服务器。

试试这些：

http://localhost:5000/时间

http://localhost:3000/时间

http://localhost:3001/时间

【讨论】：

如何判断它是否获得了点击？我调用 Flask 服务器的终端没有回显这些打印，如果这就是你的意思的话。

是的，这就是我的意思。他们应该在终端打印。见编辑

这是有用的信息，打印语句应该出现在 Flask 终端窗口中。第二次编辑：如果我理解，其目的是将日志语句反映到 React 控制台窗口中？在任何情况下，都没有效果——在任何一个终端（React 或 Flask 服务器）中都没有活动，并且网页中的信息仍然不正确。

哦，等等，我看到了：当我检查源代码并查看控制台时，我看到了第一个（'fetching'）日志语句，然后是错误而不是第二个。这也是有价值的信息，如果错误没有导致解决方案，我将更新问题以包含它们。

查看编辑后的答案。我认为问题是你在错误的端口上。