鍍金池/ 問答/Linux  HTML/ react+webpack-dev-server開發(fā)模式動態(tài)指定Restful的

react+webpack-dev-server開發(fā)模式動態(tài)指定Restful的url

使用webpack-dev-server 做react 的開發(fā)模式

node.js + react 自建本地開發(fā)服務(wù)器localhost:9000

但組件中用Fetch發(fā)送請求給后端拿數(shù)據(jù),測試時URL寫死為localhost:9100/get/test
(ps:localhost:9100為后端請求地址)

而到了與后端代碼整合的時候URL只寫成/get/test就好了

請問:webpack-dev-server測試時如何也能在URL只寫/get/test,請求時自動加上localhost:9100前綴?

回答
編輯回答
萌吟

webpack-dev-server配置項中有proxy屬性的。

用Node.js API起webpack-dev-server的服務(wù),然后用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...

2017年2月20日 20:41
編輯回答
祈歡

可以配置反向代理:


module.exports = {
    //...

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

//...
};```
2017年11月11日 13:54