Как включить прокси в ответ-рогатке (coryhouse), чтобы я мог вызывать мои REST API Django?

Question

У меня есть сервер разработки Django, работающий на порте 8050 с несколькими API REST, который я хотел бы использовать в своем приложении React, которое составлено по реакции-slingshot и работает на localhost:3002.

Что я хочу, так это для моего кода Javascript, такого как fetch('api/v1/employees'), чтобы вызвать localhost:8050 вместо localhost:3002.

Я вижу, что Raythree в обсуждении GitHub смог найти решение моего вопроса, однако я не могу заставить его решение работать. Я реализовал его совет в точности так, как он есть, но код действует так, как будто я не внес никаких изменений.

Вот как выглядит мой код в tools/srcServer.js прямо сейчас:

// This file configures the development web server
// which supports hot reloading and synchronized testing.

// Require Browsersync along with webpack and middleware for it
import browserSync from 'browser-sync';
// Required for react-router browserHistory
// see https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643
import historyApiFallback from 'connect-history-api-fallback';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import config from '../webpack.config.dev';
import proxy from 'http-proxy-middleware';

const bundler = webpack(config);

const serverProxy = proxy('/api', {
  target: "http://0.0.0.0:8050",
  changeOrigin: true, // set true for hosted sites
  logLevel: 'debug'
});

// Run Browsersync and use middleware for Hot Module Replacement
browserSync({
  port: 3000,
  ui: {
    port: 3001
  },

  server: {
    baseDir: 'src',

    middleware: [
      historyApiFallback(),

      webpackDevMiddleware(bundler, {
        // Dev middleware can't access config, so we provide publicPath
        publicPath: config.output.publicPath,

        // These settings suppress noisy webpack output so only errors are displayed to the console.
        noInfo: true,
        quiet: false,
        stats: {
          assets: false,
          colors: true,
          version: false,
          hash: false,
          timings: false,
          chunks: false,
          chunkModules: false
        }

        // for other settings see
        // https://webpack.js.org/guides/development/#using-webpack-dev-middleware
      }),

      // bundler should be the same as above
      webpackHotMiddleware(bundler),

      serverProxy,
    ]
  },

  // no need to watch '*.js' here, webpack will take care of it for us,
  // including full page reloads if HMR won't work
  files: [
    'src/*.html'
  ]
});

Answer 1

Я понял! По-видимому serverProxy должен быть проиндексирован перед webpackDevMiddleware а также webpackHotMiddleware в middleware массив!

// This file configures the development web server
// which supports hot reloading and synchronized testing.

// Require Browsersync along with webpack and middleware for it
import browserSync from 'browser-sync';
// Required for react-router browserHistory
// see https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643
import historyApiFallback from 'connect-history-api-fallback';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import config from '../webpack.config.dev';
import proxy from 'http-proxy-middleware';

const bundler = webpack(config);

const serverProxy = proxy('/api', {
  target: "http://0.0.0.0:8050",
  changeOrigin: true, // set true for hosted sites
  logLevel: 'debug'
});

// Run Browsersync and use middleware for Hot Module Replacement
browserSync({
  port: 3000,
  ui: {
    port: 3001
  },

  server: {
    baseDir: 'src',

    middleware: [
      historyApiFallback(),

      // The order of serverProxy is important. It will not work if it is indexed
      // after the webpackDevMiddleware in this array.
      serverProxy,

      webpackDevMiddleware(bundler, {
        // Dev middleware can't access config, so we provide publicPath
        publicPath: config.output.publicPath,

        // These settings suppress noisy webpack output so only errors are displayed to the console.
        noInfo: true,
        quiet: false,
        stats: {
          assets: false,
          colors: true,
          version: false,
          hash: false,
          timings: false,
          chunks: false,
          chunkModules: false
        }

        // for other settings see
        // https://webpack.js.org/guides/development/#using-webpack-dev-middleware
      }),

      // bundler should be the same as above
      webpackHotMiddleware(bundler),
    ]
  },

  // no need to watch '*.js' here, webpack will take care of it for us,
  // including full page reloads if HMR won't work
  files: [
    'src/*.html'
  ]
});