React/Spring Boot 应用程序 API 调用从前端返回 .jsx，而不是预期的数据

Question

我正在使用部署在单个 DigitalOcean Droplet 上的解耦 React / Spring Boot 应用程序。应用程序文件结构分为“后端”和“前端”文件夹，但它们都在同一个存储库中。有人告诉我这是可能的，但似乎我的 API 调用只是出于某种原因才会进入前端。

我的前端中有以下 API 调用，旨在返回所提供的服务列表

const [ services, setServices ] = useState([]);

useEffect(() => {
    axios.get('https://my_application_domain/api/packages/load')
      .then(response => {
        if (response.status === 200) {
          const sortedServices = response.data.sort((a, b) => a.price - b.price);
          setServices(sortedServices);
        } else
          console.log("nope")
      })
      .catch(error => console.error(error));
  }, [])

请原谅我糟糕的错误处理。我只是想让一些东西发挥作用。稍后我会重构。

我的所有 API 调用都出现此问题，但由于它们都非常相似，我预计问题出在 URL 本身，而不是函数的其他方面 此 API 调用过去使用

localhost:8080

而不是我的域，但我在部署后将其更改。当我在浏览器中输入该 URL 时，我会看到一个空白页面，就好像我在我的

<Route />

中使用了格式错误的

App.jsx

一样，它有一个导航栏和页脚，但没有内容。我尝试记录输出

.jsx

而不是预期数据的响应。

我的 API 似乎没有到达后端，而是到达前端并返回

.jsx

，但我不知道该去哪里修复它。我唯一的想法是，我需要以不同的方式配置 DigitalOcean 来考虑端口，但我以前从未部署过站点，而且我找不到使用与我相同的堆栈的教程。

我尝试遵循大约 6 个不同的 YT 教程并搜索解决方案，但我总是陷入其中的一个或另一个部分。我很想能够说出我到底被困在哪里，但我对此感到非常沮丧，以至于我把它放在一边几天，我不再记得了。

Answer 1

您的项目在同一存储库中前端和后端分离，是完全可行的。但是，当从前端进行 API 调用时，您需要注意代理配置，以将这些 API 请求重定向到后端。

在 React 应用程序中，您可以使用代理配置文件来指定应将哪些 API 请求重定向到后端。确保您在此文件中正确配置了后端的 URL。

例如，在前端的 package.json 文件中，您可以添加一个“代理”部分，如下所示：

"proxy": "http://localhost:8080"