如何在react-slingshot（通過coryhouse）啓用代理，這樣我可以調用我的Django REST API？

Question

我有一個運行在端口8050上的Django開發服務器，其中有幾個REST API，我想將它們服務到我的React應用程序，該應用程序由react-slingshot組成，並在localhost：3002上運行。

我想要的是我的Javascript代碼，如fetch('api/v1/employees')，實際調用localhost：8050而不是localhost：3002。

我看到raythree in a github discussion能找到我的問題的解決方案，但是，我無法讓他的解決方案工作。我完全按照他的意見執行了他的建議，但代碼的行爲好像我根本沒有做任何改變。

這裏是我的工具代碼/ 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' 
    ] 
});