我在 FastAPI 中遇到的第一个 CORS 错误

我在 FastAPI 中遇到的第一个 CORS 错误

我通过实践来学习。 我做了一个记账应用。 后端使用了 FastAPI。 前端使用了 HTML 和 JavaScript。

服务启动了。 Swagger UI 运行正常。 HTML 页面失效了。 “加载费用”按钮没有任何反应。

我检查了 Python 代码。 我检查了 fetch 请求。 看起来一切正常。

我打开了浏览器控制台。 我看到了一条红色的错误。 CORS 拦截了请求。

前端使用的是 3000 端口。 后端使用的是 8000 端口。 浏览器识别到不同的源。 它拦截了连接。

我在 FastAPI 代码中添加了 CORSMiddleware。 我允许了 http://127.0.0.1:3000 这个源。 错误消失了。

给你的经验教训：

• 首先打开浏览器控制台。
• 独立测试你的 API。
• CORS 错误发生在浏览器端。它们不是代码 Bug。

来源：https://dev.to/bynilotpal/my-first-cors-error-in-fastapi-2hf6