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

wxmimperio
  • 720

使用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前缀?

回复
阅读 2.2k
2 个回答

可以配置反向代理:


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
            }
        }
    },

//...
};```

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...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏