debugging Flask app.run方法不适用于python 3.11.1和next.js应用程序:提取失败

cxfofazt  于 2023-05-23  发布在  Python
关注(0)|答案(1)|浏览(130)

当使用python 3.10.5时,我可以使用flask调试模式调试我的flask & next.js应用程序(以启用热重载):

app.run(debug=True, host=host, port=port)

但是,当使用python 3.11.1时,flask调试模式不再起作用。我的下一个应用程序的静态部分中的fetch命令失败,我在Google Chrome dev-tools控制台中得到以下错误:

GET http://localhost:3000/ 500 (Internal Server Error)
react-dom.development.js:29840 Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
index.js:619 Uncaught TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async apiCall (webpack-internal:///./src/pages/_app.js:30:26)
    at async MyApp.getInitialProps (webpack-internal:///./src/pages/_app.js:34:27)
    at async loadGetInitialProps (file://C:\python_env\workspace\flask_demo\front_end\node_modules\next\dist\shared\lib\utils.js:146:19)
    at async renderToHTML (file://C:\python_env\workspace\flask_demo\front_end\node_modules\next\dist\server\render.js:417:13)
    at async doRender (file://C:\python_env\workspace\flask_demo\front_end\node_modules\next\dist\server\base-server.js:1031:34)
    at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (file://C:\python_env\workspace\flask_demo\front_end\node_modules\next\dist\server\base-server.js:1162:28)
    at async (file://C:\python_env\workspace\flask_demo\front_end\node_modules\next\dist\server\response-cache\index.js:99:36)
getServerError @ client.js:1
eval @ index.js:619
setTimeout (async)
hydrate @ index.js:607
await in hydrate (async)
eval @ next-dev.js:48
Promise.then (async)
eval @ next-dev.js:42
./node_modules/next/dist/client/next-dev.js @ main.js?ts=1684760846398:181
options.factory @ webpack.js?ts=1684760846398:649
__webpack_require__ @ webpack.js?ts=1684760846398:37
__webpack_exec__ @ main.js?ts=1684760846398:1094
(anonymous) @ main.js?ts=1684760846398:1095
webpackJsonpCallback @ webpack.js?ts=1684760846398:1197
(anonymous) @ main.js?ts=1684760846398:9
favicon.ico:1     GET http://localhost:3000/favicon.ico 500 (Internal Server Error)

a)如果我在额外的选项卡中手动输入获取的url http://localhost:5000/api/id_mode,我会从flask应用程序中获得预期的结果。
B)如果我使用waitress serve函数(=没有调试模式)而不是使用app.run(...)来运行flask应用程序,那么应用程序就可以正常工作。因此,这似乎不是JavaScript的问题。

serve(app, host=host, port=port)

项目文件结构:

    • main.py**中的Python代码:
import sys
from flask import (
    Flask,
    jsonify
)
from flask_cors import CORS
from waitress import serve

def main():
    # workaround to fix issue with relative path to python in PyCharm for debugging
    # Also see
    # https://gitlab.cc-asp.fraunhofer.de/isi/micat/-/issues/363
    sys.executable = sys.executable.replace('flask_demo\\App', 'flask_demo\\..\\..\\App')

    app = create_app()
    host = 'localhost'
    port = 5000
    CORS(app, resources={r"/*": {"origins": ["http://localhost:3000"]}})
    app.run(debug=True, host=host, port=port)
    # serve(app, host=host, port=port)


def create_app():
    app = Flask(__name__)

    @app.route('/api/id_mode')
    def hello_world():
        return jsonify({
            "status": "success",
            "message": "Hello World!"
        })

    return app

if __name__ == '__main__':
    main()

requirements.txt

flask==2.3.2
flask-cors==3.0.10

_app.js中定义的Next.js应用:

import React from 'react';
import App from 'next/app';

export default function MyApp({ Component, pageProps }) {
  const parameters = { ...pageProps };
  return <Component {...parameters} />;
}

MyApp.getInitialProps = async (appContext) => {
  const appProperties = await App.getInitialProps(appContext);

  async function apiCall(){
    const url = 'http://localhost:5000/api/id_mode'
    const response = await fetch(url);
    const text = await response.text();
    return text;

  }

  const extraProperty = await apiCall()

  return {
    ...appProperties,
    extraProperty
  };
};

index.js

import React from 'react';
import Router from 'next/router';

export default function Index(properties) {

  return <>{"Hello from next.js"}</>;
}

包.json

{
  "name": "flask_demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev"
  },
  "dependencies": {
    "next": "13.4.3"
  },
  "devDependencies": {
    "cross-env": "7.0.3"
  }
}

网络选项卡中的输出:

相关:
PyCharm运行flask应用程序,但在python3.11中调试失败
next.js fetch request gives error TypeError: fetch failed

oxosxuxt

oxosxuxt1#

在next.js前端中,将fetch命令的url中的localhost替换为127.0.0.1解决了这个问题。

相关问题