当使用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
1条答案
按热度按时间oxosxuxt1#
在next.js前端中,将fetch命令的url中的
localhost
替换为127.0.0.1
解决了这个问题。