小编hai*_*aka的帖子

首先，我只想说这是我的第一个 Web 应用程序项目。在过去的几天里，我一直在努力寻找如何将前端和后端放在一起的答案。我有很多问题，但我想回答的主要问题是如何从后端端点返回我的前端“最终产品”。

我的理解是这样的（如有错误请指正）：

• 前端代码由客户端（浏览器）运行。
• 当客户端与网页交互时，前端根据需要对后端进行 API 调用以检索/修改数据。
• 后端和前端通常是单独开发的，并且可以托管在单独的服务器上。
• 但是，可以（并且可能更简单）将其托管在单个域/服务器上。我希望这样做，以避免 CORS 带来的一系列问题。

那么接下来的问题就来了：

当我想测试我的前端并看看它进展如何时，我只需运行npm run start. 然后，我访问给定的网址（通常http://localhost:8080/），并且可以访问我开发的前端。当我想部署它时，我运行npm run build，它给了我一个dist文件夹（捆绑在一起并缩小）。

如果我想在本地运行和测试我的后端，就像我正在使用的那样FastAPI，我只需运行uvicorn main:app --reload.

如何将两者放在一起？更具体地说，在我的后端代码中，如何返回前端工作的产品（即文件dist夹？）。我尝试过以下方法（简化）：

@app.get("/", response_class=HTMLResponse)
def root():
    return open("../frontend/dist/index.html", "r").read()

但是，当然，这只给了我静态 html，没有 React 组件。

我意识到这篇文章可能包含错误的假设和糟糕的做法（在这种情况下，我很抱歉！并且我将不胜感激任何更正/建议。）但是，如果可以回答以下问题，我将不胜感激。我提出的这些问题有望帮助我在计算机上本地测试整个 Web 应用程序。

1. 如何针对GET域根端点处的请求返回前端工作的结果？
2. 如果我的 Web 应用程序有页面 A、页面 B 和页面 C，每个页面都有 url www.example.com/A、www.example.com/B、 ，www.example.com/C我是否必须创建三个单独的 React 前端项目？即，相当于拥有三个dist文件夹？处理这个问题的标准方法是什么？

我目前正在开发我的第一个 web 应用程序，前端React使用FastAPI.

我正在尝试与 Chrome 联合测试它——看看前端是否对后端进行了正确的 API 调用，并显示结果。我在使用 cookie 时遇到了问题，我需要帮助。提前为这篇长文章道歉——过去几天我浏览了很多资源，此时我不确定什么是相关的，什么是不相关的。

• 前端开启 localhost:8080
• 后端开启 http://127.0.0.1:8000
• 使用以下FastAPI后端代码正确设置 CORS（我相信）：

app = FastAPI()

origins = [
    "http://localhost:8080"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

情况：前端GET向http://127.0.0.1:8000/api/abc后端发出请求，后端设置 cookie。

/*====================
尝试 1：
使用以下后端代码设置 cookie：

response.set_cookie(key="abcCookieKey", value="abcCookieValue")

并GET使用以下前端 JS 代码发出请求：

fetch('http://127.0.0.1:8000/api/abc', {
            method: 'GET',
            credentials: 'include',
        })

尝试 1 的结果：
在ConsoleChrome的选项卡上，我收到以下警告：

A cookie associated with a cross-site resource at http://127.0.0.1/ was set …