提问人：fxtokyo 提问时间：11/10/2023 最后编辑：vikingfxtokyo 更新时间：11/10/2023 访问量：42
Flask React 简单应用程序上的 403 禁止答案
403 Forbidden Answer on Flask React simple App
问：
我按照本教程中概述的步骤操作：如何将 Flask 连接到 ReactJS，以构建具有 Flask 后端和 React 前端的 Web 应用程序。Flask 服务器按预期运行，并成功显示 JSON 数据。
但是，当我尝试使用 GET 请求通过 Axios 获取数据时，我遇到了 403（禁止访问）错误。http://localhost:3000/profile
以下是我的App.js文件中负责检索JSON数据的相关部分：
function getData() {
axios({ method: "GET", url: "/profile" })
.then((response) => {
const res = response.data;
setProfileData({ profile_name: res.name, about_me: res.about });
})
.catch((error) => {
if (error.response) {
console.log(error.response);
console.log(error.response.status);
console.log(error.response.headers);
}
});
} //end of new line
有趣的是，当我在另一台计算机上复制确切的基础架构时，它没有任何问题。我已经考虑过潜在的授权问题，但对于本地主机网站来说，这似乎很不寻常。此外，我还使用 chmod 777 调整了文件夹权限，以排除任何与访问相关的问题。我正在寻求帮助，以确定这种差异的根本原因，或就在哪里寻找潜在问题提供指导。
多谢
弗朗索瓦
答：
1赞
viking
11/10/2023
#1
由于我目前缺乏评论的声誉，我分享我的观察作为答案。鉴于 Flask 应用在收到来自 React 应用的请求时发生的 403 错误的描述，这表明存在潜在的 CORS（跨域资源共享）问题。
要更深入地研究这个问题，您能否检查浏览器开发人员工具中的控制台选项卡和网络请求？识别任何与 CORS 相关的错误可以深入了解 Flask 应用拒绝请求的原因。
如果遇到与 CORS 相关的错误，请考虑将 CORS 合并到 Flask 应用中。下面是您可以使用的代码片段：
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app, origins="*")
此外，为避免与某些将端口 5000-7000 用于内部目的的操作系统发生冲突，请考虑将应用的端口更改为大于 7000 的端口。例如：
if __name__ == "__main__":
app.run(port=8000, debug=True)
请将应用中的任何错误消息或日志添加到您的问题中，我将定制我的答案以解决这些细节。
评论
0赞
fxtokyo
11/10/2023
这太棒了。我做了你所做的两个更改，它奏效了。今天我尝试了一次 CORS（app），但我忘记了 origins=“*”，它不起作用。我只是尝试仔细检查 port=5000，它也正常工作，因此通过消除 CORS 更改是正确的更改。非常感谢您的帮助！
0赞
viking
11/10/2023
很高兴我能帮上忙！
评论