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

【问题标题】：Invalid options object. Dev Server has been initialized using an options object that does not match the API schema无效的选项对象。已使用与 API 架构不匹配的选项对象初始化开发服务器
【发布时间】：2022-01-19 05:57:13
【问题描述】：

当我添加 "proxy": "http://localhost:6000" 时，我一直在关注我的项目中的这个错误在我的 package.json 中。

这是纱线启动后的错误响应。

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

options.allowedHosts[0] 应该是一个非空字符串。 error 命令失败，退出代码为 1。 info 访问 https://yarnpkg.com/en/docs/cli/run 获取相关文档命令。

但是当我删除 "proxy": "http://localhost:6000" 时一切都很好。

这是在我的 package.json 中：

{
  "name": "client",
  "version": "0.1.0",
  "private": true, 
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.24.0",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-file-base64": "^1.0.3",
    "react-redux": "^7.2.6",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:6000"
}

【问题讨论】：

如果你删除它一切都很好，为什么不删除它？
因为可能需要它？我需要它将我的 api 请求代理到我的反应应用程序中的后端。但是，是的，我也在寻找解决方案
这篇githubmemory.com/repo/facebook/create-react-app/issues/11762的文章有原因但还没有解决办法

标签： node.js reactjs package.json

【解决方案1】：

这是一种解决方法。删除“代理”：“http://localhost:6000”。使用命令 npm install http-proxy-middleware --save 安装包 http-proxy-middleware。在 src 文件夹中创建一个文件 setupProxy.js。在里面添加这些行：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:6000',
      changeOrigin: true,
    })
  );
};

现在，运行您的应用。它应该可以工作。

【讨论】：

感谢@josipat 的解决方法。似乎将/ 用于上下文（路由匹配值）会导致一些问题。除非我遗漏了什么，否则您将不得不使用上面建议的非根路径（/api）。当试图模拟我在 package.json 文件中使用 proxy 值时，我收到一个客户端错误：domain option is required。
另外，需要指出的是，您可能想要这样做：app.use(createProxyMiddleware('/api', { ... 而不是从中间件接收正确的日志记录。
这对我有用。我升级了 webpack 和 node，从我的 package.json 中删除了代理，然后升级了我现有的 api 调用以路由到 /api。

【解决方案2】：

一个快速的解决方案是使用react-scripts降级您的webpack版本

在您的 react-app 的 package.json 文件中，更改 react-scripts 版本。

替换

"react-scripts": "5.*",

收件人

"react-scripts": "4.0.3",

删除 node_modules 并再次为您的 react 应用安装软件包。

【讨论】：

【解决方案3】：

上面关于 http-proxy-middleware 的答案的来源：https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually 我遇到了同样的问题，它对我有用。

【讨论】：

【解决方案4】：

我也遇到过同样的问题。但是当我连接到互联网时，它运行良好...

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案5】：

我也遇到了同样的问题，您可以在 中的 "proxy": "https://yourdomain" 之后添加 "allowedHosts": "all"包.json。希望它能解决你的问题。

更新：问题出在公司 VPN 上。当我断开VPN时，它可以正常工作。

【讨论】：