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

Question

当我添加 "proxy": "http://localhost:6000" 时，我的项目中出现了这个错误在我的 package.json.

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

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

options.allowedHosts[0] should be a non-empty string. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

但是当我删除 "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"
}

Answer 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,
    })
  );
};

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

Answer 2

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

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

Answer 3

一个快速的解决方案是 使用 react-scripts

降级您的 webpack 版本

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

替换

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

到

"react-scripts": "4.0.3",

删除 node_modules 并再次为您的 React 应用程序安装包。

Answer 4

我遇到了同样的问题，josipat 的回答对我有用，只是我需要将它安装为开发依赖项。将以下代码保存到 src/setUpProxy.js 的解决方案源自 Create React App.

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

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

reactjs create-react-app

Answer 5

其他解决方案对我不起作用，所以这是我发现的：

这似乎是一个 CRA 错误（安全功能？），其中 allowedHosts 设置为 [undefined] 因为 prepareUrls 没有设置 lanUrlForConfig 当两个主机并指定了一个代理。相关的 CRA GitHub 问题是 here。

如果适用于您的用例（阅读 here 以了解更多信息），可以通过创建 .env 文件并向其添加 DANGEROUSLY_DISABLE_HOST_CHECK=true 或尝试 [=16] 来避免这种情况=].

Answer 6

我和其他人一样用http-proxy-middleware解决了这个问题。但是为了让它正常工作，我不得不关闭我的 VPN。与 Saeed Kolivand 上面的答案相同。 =)

Answer 7

运行 npm audit fix --force 在仍然连接到互联网的同时运行npm start

应该可以正常工作

Answer 8

我只有在使用 nvm 切换到 Node 18.0.0 时才遇到此错误。摆脱 "proxy":"http://localhost:5000" 修复它，但它不是我的选择，我想避免服务器上的代理中间件。如果您切换到以前的 Node 版本，如 17.0.0，它可以正常工作。我认为在 CRA 团队不解决该问题之前，这可能是一个更好的选择。

Answer 9

恢复到旧版本的节点对我有用。首先清除 npm 的缓存并安装旧版本的节点。

    > sudo npm cache clean -f
    > sudo npm install -g n
    > sudo n <version>

最新的版本 18 对我不起作用； 版本 14.8.2 适合我，因为我之前使用的是这个版本。您可以尝试使用 18

以下的任何版本

Answer 10

Node 版本 18.0.0 出现此错误，我尝试使用 Node 16.15.0 版本它工作正常

Answer 11

我刚刚在 JS 调试器中调试了这个问题。

节点 v18 已更改 os.networkInterfaces() family:

v18.0.0
The family property now returns a number instead of a string.

这将抛弃 react-scripts 使用的 address 模块，该模块根据“IPv4”检查家庭

Answer 12

对于 5.0.1 react-scripts 该错误尚未重现，但在 5.0.0 中出现错误。我想你可以使用 5.0.1 来解决这个问题

Answer 13

对我来说，删除 package-lock.json 和 node_modules 文件夹 - 然后运行 npm i 解决了问题。

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

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema

node.js

reactjs

package.json