如何将 Netlify 上的 React 前端连接到 PythonAnywhere 上的 Flask 后端
How to connect a React frontend on Netlify to a Flask backend on PythonAnywhere
TLDR：React 应用程序在本地托管时与 PythonAnywhere 上的 Flask API 正确交互，但在 Netlify 上托管静态构建时则不然。也许构建中缺少代理信息？
编辑 1：
以下是浏览器控制台中的错误：
我创建了一个 Flask API，它从 Amazon S3 中提取机器学习模型，并对来自 POST 的数据输入进行 returns 预测要求。我已将此 API 放在 PythonAnywhere.
上
我还创建了一个 React 前端，它允许我输入数据、提交数据，然后接收预测。当我在本地托管这个应用程序时，它表现得很好（即连接到 PythonAnywhere 上的 Flask 应用程序，正确加载模型，并返回预测）。
我已经尝试在 Netlify 上部署 React 应用程序的静态构建。它的行为符合预期，except 对于任何需要与 Flask 应用程序交互的东西。我有一个用于测试的按钮，它只是在 GET 请求中调用 Flask 应用程序，即使这样也会引发 404 错误。
我检查了 PythonAnywhere 上的错误和服务器日志，但什么也没看到。我唯一能想到的是我的 package.json 文件中列出 PythonAnywhere 应用程序域的代理由于某种原因未包含在构建中，但我不知道为什么会这样。
有没有其他人 运行 遇到过类似的问题，或者知道如何检查代理信息是否包含在静态构建中？提前致谢！
感谢@Glenn 的帮助。
解决方案：
- 我意识到（尴尬地迟到了）请求没有到达正确的地址，如上面的浏览器控制台错误所示。我在开发期间使用了代理，因此 netlify 应用程序调用自身而不是 pythonanywhere API。 我只是进入我的反应代码并编辑了 pythonanywhere 的路径。例如
onClick={ async () => {
const response = await fetch("/get", {...}}
变成了
onClick={ async () => {
const response = await fetch("https://username.pythonanywhere.com/get", {...}}
- 正如@Glenn 提到的，可能也存在 CORS 问题，因此在我的烧瓶应用程序中我使用了
flask_cors。我不能肯定地说这是必要的，因为我没有在提取地址更改后测试删除它，但我怀疑这是必要的。
希望这可以帮助到其他人
TLDR：React 应用程序在本地托管时与 PythonAnywhere 上的 Flask API 正确交互，但在 Netlify 上托管静态构建时则不然。也许构建中缺少代理信息？
编辑 1：
以下是浏览器控制台中的错误：
我创建了一个 Flask API，它从 Amazon S3 中提取机器学习模型，并对来自 POST 的数据输入进行 returns 预测要求。我已将此 API 放在 PythonAnywhere.
上我还创建了一个 React 前端，它允许我输入数据、提交数据，然后接收预测。当我在本地托管这个应用程序时，它表现得很好（即连接到 PythonAnywhere 上的 Flask 应用程序，正确加载模型，并返回预测）。
我已经尝试在 Netlify 上部署 React 应用程序的静态构建。它的行为符合预期，except 对于任何需要与 Flask 应用程序交互的东西。我有一个用于测试的按钮，它只是在 GET 请求中调用 Flask 应用程序，即使这样也会引发 404 错误。
我检查了 PythonAnywhere 上的错误和服务器日志，但什么也没看到。我唯一能想到的是我的 package.json 文件中列出 PythonAnywhere 应用程序域的代理由于某种原因未包含在构建中，但我不知道为什么会这样。
有没有其他人 运行 遇到过类似的问题，或者知道如何检查代理信息是否包含在静态构建中？提前致谢！
感谢@Glenn 的帮助。
解决方案：
- 我意识到（尴尬地迟到了）请求没有到达正确的地址，如上面的浏览器控制台错误所示。我在开发期间使用了代理，因此 netlify 应用程序调用自身而不是 pythonanywhere API。 我只是进入我的反应代码并编辑了 pythonanywhere 的路径。例如
onClick={ async () => {
const response = await fetch("/get", {...}}
变成了
onClick={ async () => {
const response = await fetch("https://username.pythonanywhere.com/get", {...}}
- 正如@Glenn 提到的，可能也存在 CORS 问题，因此在我的烧瓶应用程序中我使用了
flask_cors。我不能肯定地说这是必要的，因为我没有在提取地址更改后测试删除它，但我怀疑这是必要的。
希望这可以帮助到其他人