WinPython 3.11.1下Flask Debug模式与Next.js交互Fetch失败问题

问题描述 #

在WinPython 3.10.5环境中，通过app.run(debug=True)启用Flask调试模式（支持热重载），可正常调试Flask与Next.js组合应用。但切换到WinPython 3.11.1后，Flask调试模式失效：Next.js静态页面的fetch请求失败，Chrome开发者工具控制台抛出以下错误：

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)

测试验证 #

• 手动在新标签页访问http://localhost:5000/api/id_mode，可正常获取Flask返回的预期结果；
• 使用Waitress的serve函数（不启用调试模式）运行Flask时，整个应用工作正常，排除JavaScript代码问题：

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

项目文件结构 #

核心代码文件 #

main.py #

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（Next.js页面） #

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

export default function Index(properties) {

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

package.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"
  }
}

Network标签页输出 #

内容的提问来源于stack exchange，提问作者Stefan