私はDjango REST APIを呼び出すことができるように、反応slingshot（coryhouseによる）でプロキシを有効にする方法？

Question

ポート8050上で実行しているいくつかのREST APIを持つDjango開発サーバーは、react-slingshotで構成され、localhost：3002で動作しているReactアプリケーションに提供したいと考えています。

fetch('api/v1/employees')のような私のJavaScriptコードでは、localhost：3002の代わりにlocalhost：8050を実際に呼び出しています。

私は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はmiddleware配列のの前にインデックスされる必要があります。webpackDevMiddlewareとwebpackHotMiddleware！

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