Когда указано, "proxy" в package.json должен быть строкой

Я хотел бы иметь прокси-сервер в моем клиентском клиенте, мой пакет.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>

ОТВЕТЫ

Ответ 1

Проблема, с которой вы сталкиваетесь, из-за CRA v2.

Во-первых, вам не потребуются никакие дополнительные настройки, если вы просто используете простую строку в вашем прокси. Но в тот момент, когда вы используете объект, вы используете расширенную настройку.

Итак, вам нужно будет выполнить шаги, перечисленные ниже:

  1. Установите http-proxy-middleware, набрав npm я --save http-proxy-middleware

  2. Удалите записи из package.json:

"proxy": {
    "/auth/google": {
        "target": "http://localhost:5000"
    }
}
  1. Теперь создайте установочный файл для вашего прокси. Вы должны назвать его setupProxy.js в папке src на стороне клиента и ввести следующий код:
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(proxy('/auth/google', 
        { target: 'http://localhost:5000/' }
    ));
}

для получения дополнительной информации проверьте это

Ответ 2

Я думаю, что это проблема "создать-реагировать-приложение".

Вы можете перейти на 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/' }));
};

Надеюсь, это может решить вашу проблему, счастливый взлом!

Ответ 3

Сначала установите http-proxy-middleware, используя npm или Yarn:

$ 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/' }))
}

Вы также можете использовать полностью собственную логику прямо сейчас! Я получил этот рабочий ответ по этой ссылке и, следовательно, sharing- https://github.com/facebook/create-react-app/issues/5103

Ответ 4

Измените прокси на что-то вроде этого и надеюсь, что оно будет работать так же, как и у меня.

"proxy": " http://localhost: 5000/auth/google "

Ответ 5

https://github.com/facebook/create-react-app/issues/5103

Переместите расширенную конфигурацию прокси в src/setupProxy.js

Это изменение требуется только для лиц, которые использовали расширенную конфигурацию прокси в v1.

Чтобы проверить, требуется ли действие, найдите ключ прокси в package.json. Затем следуйте таблице ниже.

Я не смог найти ключ прокси в package.json Никаких действий не требуется! Значением прокси является строка (например, http://localhost: 5000). Никаких действий не требуется! Значением прокси является объект. Следуйте инструкциям по миграции ниже. Если ваш прокси является объектом, это означает, что вы используете расширенную настройку прокси.

Опять же, если ваше поле прокси является строкой, например, http://localhost: 5000, вам не нужно ничего делать. Эта функция все еще поддерживается и имеет такое же поведение.

Сначала установите http-proxy-middleware, используя npm или Yarn:

$ 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/' }))
}

Вы также можете использовать полностью собственную логику прямо сейчас! Это было невозможно раньше.

Это сработало.

Ответ 6

Не удалось загрузить ресурс: сервер ответил статусом 404 (не найден): 3000/api/brands

не работал для меня;

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

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

Ответ 7

После создания файла на стороне клиента (приложение React) с именем src/setupProxy.js убедитесь, что вы перезапустите сервер. Файл package.json необходимо перезапустить, поскольку вы работаете с файлом вне исходного каталога.

Ответ 8

установите "http-proxy-middleware" в свой клиент, "не внутри сервера".

Добавьте setupProxy.js внутри вашего клиента /src/каталог. (должно быть так: client/src/setupProxy.js)

Добавьте ниже строки к нему.

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

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

Вот и все, зайдите в вашу консоль Google Dev и добавьте localhost: 3000/auth/google/callback в ваш проект.

Ответ 9

В моих случаях мне не нужен src/setupProxy.js... Я делаю это с помощью Axios... Проверьте про Axios Proxy

Проверьте в библиотеке узлов, если у вас есть или нет: http-proxy-middleware не является обязательным, мне это не нужно !!!

Просто попробуйте перезапустить серверную часть, и это все !!! Добавить для проверки:

componentDidMount(){
    axios.get('/api/path-you-want').then(response=>{
      console.log(response)
    })
  }

Ответ 10

app.use(
  '/api',
  proxy({ target: 'http://www.example.org', changeOrigin: true })
);


changeOrigin:true

Ответ 12

        ...
        "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.
    Just change '"proxy": "http://localhost:5000"' and you are good to go.
    If that does not solve the problem then register your proxy using **http-proxy-middleware**

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

    Then create setypProxy.js file under src directory the put the following code.
const proxy = require('http-proxy-middleware');
module.exports = app => {
  app.use(
    proxy('/auth/google', {
      target: 'http://localhost:5000'
    })
  );
 app.use(
    proxy('/auth/facebook', {
      target: 'http://localhost:6000'
    })
  );
};