时间戳

首页 > 解决方案 > 如何将 Netlify 上的 React 前端连接到 PythonAnywhere 上的 Flask 后端

reactjs - 如何将 Netlify 上的 React 前端连接到 PythonAnywhere 上的 Flask 后端

问题描述

TLDR：当在本地托管时，React 应用程序与 PythonAnywhere 上的 Flask API 正确接口，但在 Netlify 上托管静态构建时不能。也许构建中缺少代理信息？

编辑 1：以下是浏览器控制台中的错误： 在此处输入图像描述

我创建了一个Flask API，它从 Amazon S3 中提取机器学习模型并返回对来自 POST 请求的数据输入的预测。我已将此 A​​PI 放在PythonAnywhere上。

我还创建了一个React前端，它允许我输入数据、提交数据，然后接收预测。当我在本地托管此应用程序时，它会正常运行（即连接到 PythonAnywhere 上的 Flask 应用程序，正确加载模型并返回预测）。

我尝试在Netlify上部署 React 应用程序的静态构建。除了需要与 Flask 应用程序交互的任何内容外，它的行为与预期一样。我有一个用于测试的按钮，它只是在 GET 请求中调用 Flask 应用程序，即使这样也会引发 404 错误。

我检查了 PythonAnywhere 上的错误和服务器日志，但什么也没看到。我唯一能想到的是，在我的文件中列出 PythonAnywhere 应用程序域的代理package.json由于某种原因未包含在构建中，但我不知道为什么会这样。

有没有其他人遇到过类似的问题或知道如何检查代理信息是否包含在静态构建中？提前致谢！

标签： reactjsnetlifypythonanywhere

解决方案

感谢@Glenn 的帮助。

解决方案：

  1. 我意识到（令人尴尬地迟到了）请求没有发送到正确的地址，如上面的浏览器控制台错误所示。我在开发过程中使用了代理，因此 netlify 应用程序调用的是自身而不是 pythonanywhere API。我只是进入了我的反应代码并编辑了 pythonanywhere 的路径。例如
onClick={ async () => {
        const response = await fetch("/get", {...}}

变成了

onClick={ async () => {
        const response = await fetch("https://username.pythonanywhere.com/get", {...}}
  1. 正如@Glenn 提到的，可能也存在 CORS 问题，所以在我的烧瓶应用程序中，我使用了flask_cors. 我不能肯定地说这是必要的，因为我没有在获取地址更改后测试删除它，但我怀疑这是必要的。

希望这可以帮助别人

推荐阅读