react+webpack-dev-server开发模式动态指定Restful的url

Question

使用webpack-dev-server 做react 的开发模式

node.js + react 自建本地开发服务器localhost:9000

但组件中用Fetch发送请求给后端拿数据，测试时URL写死为localhost:9100/get/test
（ps：localhost:9100为后端请求地址）

而到了与后端代码整合的时候URL只写成/get/test就好了

请问：webpack-dev-server测试时如何也能在URL只写/get/test，请求时自动加上localhost:9100前缀？

Answer 1

可以配置反向代理：

module.exports = {
    //...

    // webpack-dev-server的配置
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,
        port: 3000,
        host: '10.0.0.9', //本地前端服务
        proxy: {
            '/test/*': {
                target: 'http://localhost:9100', // 本地后端服务
                changeOrigin: true,
                secure: false
            }
        }
    },

//...
};```

Answer 2

webpack-dev-server配置项中有proxy属性的。

用Node.js API起webpack-dev-server的服务，然后用proxy代理请求就行。

大概这个样子吧。(一般来讲前端都会给请求加上一个固定的识别前缀，然后在proxy里面rewrite掉)

let server = new WebpackDevServer(compiler, {
  stats: {
    colors: true,
  },
  proxy: {
    '/api/*': {
      target: 'http://localhost:9100',
      pathRewrite: {'^/api' : ''}
      secure: false
    }
  },
});

https://webpack.js.org/config...