指定时,package.json 中的“proxy”必须是字符串

IT技术 reactjs
2021-04-06 04:15:46

我想在我的react客户端中有代理,我的 package.json 包含:

...
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "/auth/google": {
      "target": "http://localhost:5000"
    }
   },
...

但是当我运行它时,我得到了错误

When specified, "proxy" in package.json must be a string.
[1] Instead, the type of "proxy" was "object".
[1] Either remove "proxy" from package.json, or make it a string.

我尝试转换为字符串,没有错误但代理不起作用

"proxy": "http://localhost:5000"

我的 App.js

<div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>hey there</p>
          <a href="/auth/google">Sign In With Google</a>
        </header>
      </div>
6个回答

您面临的问题是因为CRA v2

首先,如果您只是在代理中使用纯字符串,则不需要任何额外的配置。但是在您使用对象的那一刻,您正在使用高级配置。

因此,您必须按照下面列出的步骤操作:

  1. 通过键入安装 http-proxy-middleware npm i --save http-proxy-middleware

  2. 从 package.json 中删除条目:

"proxy": {
    "/auth/google": {
        "target": "http://localhost:5000"
    }
}
  1. 现在为您的代理创建一个安装文件。您应该在客户端的 src 文件夹中将其命名为 setupProxy.js 并键入以下代码:
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(proxy('/auth/google', 
        { target: 'http://localhost:5000/' }
    ));
}

有关更多信息,请检查

@RohanDhar,您的解决方案不起作用,我将 setupProxy.js 放在 src 文件夹中,当我调用 api 时,它给了我 404
2021-05-23 04:15:46
@RohanDhar,请告诉我应该把 setupProxy.js 文件放在哪里,如果它在 react 的 src 文件夹内,那么如何使用它,如果它在服务器端(app.js 或 server.js),我很困惑关于在哪里需要这个文件,客户端还是服务器端?...... .post('/api/auth/user',)....它在控制台中给了我 404 错误
2021-05-25 04:15:46
没什么。只需在客户端目录的 src 文件夹中创建一个名为 setupProxy.js 的文件。而已。
2021-06-06 04:15:46
对于 2020 年的任何人,请将 importconst { createProxyMiddleware } = require("http-proxy-middleware");替换为 并将proxyin 函数替换createProxyMiddleware谢谢@RohanDhar
2021-06-08 04:15:46
@SaurabhMistry:请分享您的代码。此外,您需要非常小心地定义代理路由。您可以按照此链接中的说明进行操作:github.com/chimurai/http-proxy-middleware如果可行,请告诉我。
2021-06-21 04:15:46

我认为这是“create-react-app”问题。

你可以去https://github.com/facebook/create-react-app/issues/5103 迁移到新的代理处理方法。

简而言之,您只需要安装一个名为“http-proxy-middleware”的新库

npm install http-proxy-middleware --save

然后创建一个新文件“src/setupProxy.js”,然后输入

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/auth/google', { target: 'http://localhost:5000/' }));
};

希望这可以解决您的问题,快乐黑客!

不适用于最新版本,说“代理”不是一个功能。需要替换const proxy = require('http-proxy-middleware');const { createProxyMiddleware } = require('http-proxy-middleware');并使用createProxyMiddleware函数,正如对此问题的最新回复中所建议的那样。
2021-06-06 04:15:46
,您的解决方案不起作用,我将 setupProxy.js 放在 src 文件夹中,当我调用 api 时,它给了我 404
2021-06-11 04:15:46

首先,使用 npm 或 Yarn 安装 http-proxy-middleware:

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

接下来,创建 src/setupProxy.js 并将以下内容放入其中:

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

module.exports = function(app) {
  // ...
}

现在,逐个迁移代理对象中的每个条目,例如:

"proxy": {
  "/api": {
    "target": "http://localhost:5000/"
    },
  "/*.svg": {
    "target": "http://localhost:5000/"
  }
}

src/setupProxy.js像这样放置条目

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

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }))
  app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }))
}

您现在还可以在那里使用完全自定义的逻辑!我从这个链接得到了这个有效的回应,因此分享 - https://github.com/facebook/create-react-app/issues/5103

对于 2020 年的人,请http-proxy-middleware通过npm i --save http-proxy-middlewareclient文件夹键入来安装

从 中删除条目package.json

"proxy": {
    "/auth/google": {
        "target": "http://localhost:5000"
    }
}

现在为您的代理创建一个安装文件。您应该setupProxy.js在客户端的 src 文件夹中将其命名并键入以下代码:

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

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/auth/google", { target: "http://localhost:5000/" })
  );
};

PS:您不需要setupProxy.jsserver.js或 中包含任何地方index.js只需复制和粘贴。

愿上帝保佑你。你救了我的工作,因为这是最高的赌注。
2021-06-17 04:15:46

以下对我有用:

从 package.json 中删除“代理”。

在客户端目录中安装“http-proxy-middleware”。为此,请 cd 进入客户端目录并运行“npm i --save http-proxy-middleware”。然后,在客户端的 src 目录中创建一个名为“setupProxy.js”的新文件。将以下代码放入此文件中:

const { createProxyMiddleware } = require('http-proxy-middleware');
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(createProxyMiddleware('/api/', // replace with your endpoint
        { target: 'http://localhost:8000' } // replace with your target
    ));
}

重新启动服务器,你应该很高兴。