使用 http-proxy-middleware 时 React App 未加载答案

【问题标题】：React App Not Loading When Using http-proxy-middleware使用 http-proxy-middleware 时 React App 未加载
【发布时间】：2022-07-13 05:41:51
【问题描述】：

好吧，我在这件事上的理智已经快到头了。

所以，我有一个带有 Express 后端的基本 React 前端。 React 正在运行 localhost:3000，后端正在运行 localhost:3030。按照setting up some Spotify integration 的指南，一切正常，直到我点击设置代理的部分。（我的设置与 Spotify 指南略有不同，我所有的东西都通过 /spotify/auth 而不是 /auth）

我安装了 http-proxy-middleware，在我的 /src 文件夹中创建了 setupProxy.js，如果我尝试正常加载 localhost:3000，我什么也得不到——我的应用程序根本无法加载。

让应用再次出现的唯一方法是删除该文件。就我所知，Spotify 指南上的那个有点过时了，但即使使用在其他地方找到的建议，我也没有运气。这是我的 setupProxy.js 文件的当前设置：

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/spotify/**",
    createProxyMiddleware({
      target: "http://localhost:3030",
      changeOrigin: true,
    })
  );
};

我什至删除了将使用代理的实际提取，但仍然无法加载我的页面。我也无法在我的 package.json 中使用“代理”：“http://localhost:3030”，因为它会抛出：

无效的选项对象。已使用与 API 架构不匹配的选项对象初始化开发服务器。

- options.allowedHosts[0] 应该是一个非空字符串。”

【问题讨论】：

您有什么理由使用完整的代理中间件？只需将"proxy": "http://localhost:3030", 添加到您的package.json 就足够了
在问题中提到过——无论出于何种原因，将该行添加到 package.json 会在我启动应用程序时引发完全不同的错误，“无效的选项对象。开发服务器已使用与 API 架构不匹配的选项对象。- options.allowedHosts[0] 应该是一个非空字符串。"
您是否使用create-react-app 引导您的前端应用程序？你的 package.json 中有哪些版本的 react-scripts 和其他 React 依赖项？您是否尝试过全新安装，例如rm -r node_modules package-lock.json && npm install（或纱线等价物）？
我自己设法解决了这个问题。由于其他几个项目的习惯，我的包 json 中有“类型”：“模块”，因此使用导入语句而不是要求。即使使用正确的 setupProxy 格式，它仍然会给我带来问题，所以我尝试删除它并切换回 requires 并且突然它起作用了。

标签： javascript node.js reactjs package.json http-proxy-middleware

【解决方案1】：

设法解决了我的问题，但我仍然不确定它为什么会起作用。

我遇到的问题源于在 package.json 中使用“type”：“module”。我在所有后端都使用了正确的导入语句，并尝试将它用于 setupProxy.js，但这总是会导致问题出现。在我的后端删除该行并将导入替换为 requires 后，一切都开始工作了。

这似乎是一个奇怪的兼容性问题，但可能有更好的解释。

【讨论】：

【解决方案2】：

由于 http-proxy-middleware 导致我的 react 应用程序未加载，遇到了与您相同的问题。不同的问题/解决方案，但对于也遇到此问题并关注此 youtube 视频 https://www.youtube.com/watch?v=hxyp_LkKDdk

的人

教程有

const proxy = require("http-proxy-middleware")

而不是

const {createProxyMiddleware} = require("http-proxy-middleware")

在我做出改变后，我的问题就解决了。不要忘记在 app.use() 中将“proxy”更改为“createProxyMiddleware”

【讨论】：