Если указано, "прокси" в package.json должен быть строкой

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

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

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

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

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

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

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

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

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

3. Теперь создайте установочный файл для вашего прокси. Вы должны назвать его setupProxy.js в папке src на стороне клиента и ввести следующий код:

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(proxy('/auth/google', 
        { target: '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/' }))
}

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

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

install "http-proxy-middleware" into your client, "not inside server".

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

Добавьте к нему следующие строки.

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

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

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

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

"прокси": "http: // локальный: 5000 / auth / google"

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

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

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

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

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

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

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

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

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

Опять же, если ваше поле прокси является строкой, например http: // локальный: 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/' }))
}

Вы также можете использовать здесь полностью настраиваемую логику! Раньше это было невозможно.

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

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


changeOrigin:true

Это связано с ошибкой в ​​create-react-app version2.

Просто беги

$ npm install react-scripts@next --save
$ # or
$ yarn add react-scripts@next

Ответ найден по адресу:

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

        ...
        "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 doesn't 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'
    })
  );
};

Если вам нужно отправлять запросы прокси и переписывать URL-адреса, например localhost:3000/api/backend/some/method на https://api-server.example.com/some/method, вам также необходимо использовать опцию pathRewrite:

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

module.exports = function(app) {
  app.use(
    "/api/backend",
    createProxyMiddleware({
      target: "https://api-server.example.com",
      changeOrigin: true,
      pathRewrite: {
        "^/api/backend": "",
      },
    })
  );
};

Для меня сработало следующее:

Удалите «прокси» из вашего package.json.

Установите http-proxy-middleware в каталог клиента. Для этого перейдите в каталог клиента и запустите «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
    ));
}

перезапустите сервер, и все будет в порядке.

Для людей в 2020 году, Установите http-proxy-middleware, набрав npm i --save http-proxy-middleware в папке client.

Удалите записи из 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.js в server.js или index.js. просто скопируйте и вставьте.

Создайте файл setupProxy.js внутри папки src и скопируйте и вставьте приведенный ниже код.

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

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

На данный момент я использую Реагировать 16.8.13, это отлично работает:

1- удалить "proxy": {***} из файла package.json

2-тип npm install http-proxy-middleware

3- создать файл src/setupProxy.js

4-вставьте следующий код:

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

module.exports = (app) => {
    app.use(
        createProxyMiddleware('/endpoint/*', {
            target: 'http://address/',
            secure: false,
        }),
    );
};

У меня это сработало (как уже ответили несколько человек). Но я пишу это на всякий случай, если кто-то спросит, верен ли этот ответ в 2021 году.

• Удалите это из файла package.json:

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

• Установите промежуточное ПО прокси, запустив npm install --save http-proxy-middleware.
• Создайте файл setupProxy.js в своем файле src (рядом с файлом index.js) на веб-интерфейсе.
• В этом файле setupProxy.js поместите:

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

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

Конечно, ваш порт может быть любым. Это не обязательно должно быть 5000. Где бы вы ни работали с серверной службой. Вот и все. Вам не нужно никуда импортировать этот файл. Работает как есть.