Webpack не обнаруживает прокси для локальной разработки

Question

У меня проблемы с настройкой небольшого прокси-сервера для работы с моим приложением React. Я пытаюсь использовать небольшой express сервер, чтобы сохранить некоторые ключи API в секрете, чтобы мое приложение могло использовать сторонний API (для github API указывается c). У меня запущено небольшое приложение express, которое я могу запросить, чтобы получить ключи API из файла .env и прикрепить эти ключи к моему запросу к стороннему API.

В настоящее время я могу одновременно запускать интерфейсное приложение и приложение express, и я могу запросить приложение express и получить ответ с помощью моего браузера.

I я пытаюсь настроить webpack для прокси моих запросов через это приложение express. В моем файле webpack.config.js есть:

//
devServer: {
    port: 8080,
    proxy: {
      '/api/**': {
        target: 'http://localhost:3000',
        secure: false,
        changeOrigin: true
      }
    }
  }
//

Внешнее приложение работает на порту 8080, а мое приложение Express работает на порту 3000, оба на localhost .

В моем приложении React для проверки того, был ли обнаружен / использован этот прокси-сервер, в компоненте есть следующее:

//
handleSubmit(event) {
    event.preventDefault();
    fetch('/api/secret')
      .then(res => {
        console.log('RES: ', res)
        res.json()
      })
      .then(data => {
        console.log("Data: ", data)
        return JSON.stringify(data)
      })
    this.props.onSubmit(this.state.username)
  }
//

Код бэкенда очень прост в момент, но вот он:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
require('dotenv').config();

// Initialize app
const app = express();
const port = 3000;

// Configure
app.use(bodyParser.json())
app.use(cors())



app.get('/secret', (req, res) => {
  res.status(200)
  res.send({ aSecret: process.env.<API_KEY> })
})

app.listen(port, () => console.log(`App is running on port ${port}`))

В моем package.json у меня есть следующее (соответствующие сценарии и зависимости):

...
...
"start": "concurrently --kill-others \"webpack-dev-server\" \"npm run server\"",
    "server": "nodemon server/index.js"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-icons": "^3.9.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "body-parser": "^1.19.0",
    "concurrently": "^5.1.0",
    "cors": "^2.8.5",
    "css-loader": "^3.4.2",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "html-webpack-plugin": "^3.2.0",
    "nodemon": "^2.0.2",
    "style-loader": "^1.1.3",
    "svg-inline-loader": "^0.8.2",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "proxy": "http://localhost:3000"
}

Как вы можете видеть, в компоненте I Я (пытаюсь) сделать запрос к api/secret и надеюсь получить в ответ ключ API, который я сохранил в моем .env.

Когда я запрашиваю этот маршрут в своем браузере с помощью fetch('http://localhost:3000/secret'), я могу успешно получить доступ к ключу API, поэтому я знаю, что при запуске сценария npm run start одновременно и приложение React, и Express приложение запускается одновременно.

Когда я нажимаю кнопку в моем компоненте React, который отправляет запрос на /api/secret, я получаю следующий вывод в консоли браузера (в соответствии с журналами консоли, которые у меня есть в компоненте реагирования на данный момент): http://localhost:8080/api/secret, further showing that the proxy I'm trying to set up is not being detected ">

Я просто не уверен в этом, что я делаю неправильно с конфигурацией proxy в конфигурации devServer webpack.

Я вижу, что имя хоста автоматически добавляется к /api/secret в fetch в компоненте React.

Заявленная цель: Webpack успешно обнаруживает прокси-сервер, который я использую для запросов к стороннему API (GitHub).

Я прошу прощения, если этот вопрос повторяется, я потратил несколько часов на изучение и настройку этой конфигурации и не смог выяснить, как ее настроить. Это моя первая попытка раскрутить небольшой прокси-сервер. Заранее спасибо за любую помощь!

Answer 1

Вам необходимо вернуть разрешение. json ()

handleSubmit(event) {
    event.preventDefault();
    fetch('/api/secret')
      .then(res => {
        console.log('RES: ', res)
        return res.json()
      })
      .then(data => {
        console.log("Data: ", data)
        return JSON.stringify(data)
      })
    this.props.onSubmit(this.state.username)
  }