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

Question

"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"
}

Answer 1

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

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

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

现在，运行您的应用程序。它应该有效。

Answer 2

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

这似乎是一个 CRA 错误（安全功能？），因为在指定主机和代理时没有设置，allowedHosts所以被设置为。相关的 CRA GitHub 问题在这里。[undefined]prepareUrlslanUrlForConfig

如果适合您的用例（请阅读此处以了解更多信息），可以通过创建文件并向其.env添加或尝试.DANGEROUSLY_DISABLE_HOST_CHECK=trueDANGEROUSLY_DISABLE_HOST_CHECK=true yarn start

Answer 3

设置"allowedHosts"为属性package.json对我来说不起作用。我必须将它包装在一个options属性中：

"options": {
    "allowedHosts": ["localhost", ".localhost"],
    "proxy": "https://localhost:3386/"
  }

之后，npm start无需重新安装模块即可完成任务。

更新：我根据一些评论和其他答案（特别是Anjul 的）做了一些额外的研究。我无法找到支持package.json"options"中的条目的文档；然而，在我看来，这可能是使用Webpack的副作用。

Answer 4

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

在package.json您的反应应用程序的文件中，更改react-scripts版本。

代替

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

到

"react-scripts": "4.0.3",

删除node_modules并重新安装您的 React 应用程序的软件包。

Answer 5

运行npm audit fix --force 并在仍连接到互联网的情况下运行npm start

应该可以正常工作

Answer 6

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

Answer 7

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

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

最新版本 18不适合我；版本 14.8.2对我有用，因为我以前使用过这个版本。您可以尝试使用低于 18 的任何版本