前后端分离的项目,使用webpack dev server怎么访问后端api?

nodejs webpack by Xudong Zhang @ 2016-04-23 13:47:20

最近在做一个react的项目,前后端分离的,前端使用webpack打包,开发也是直接用的webpack dev server,hot reload确实挺方便的,但是当需要接后端api的时候就又些麻烦了。

比如webpack dev server占用了3000端口,后台的node服务就不能使用3000端口了,这样前端页面的请求也就获取不到了,有什么好方法么?


webpack dev server有proxy的配置。

比如webpack dev server在3000端口,node服务使用3001端口,大致的配置如下

  devServer:{
    contentBase: 'src/www',
    devtool: 'eval',
    hot: true,
    inline: true,
    port: 3000,
    host: '0.0.0.0',
    historyApiFallback: true,
    //proxy /api/* to a node server
    proxy: {
      '/api/*': {
               target: 'http://localhost:3001'
      }
    },
  },

这个把所有匹配 http://localhost:3000/api/* 的请求都转发到 http://localhost:3001 去了。

而且这里不限于localhost,也可以直接用ip或者域名转发到后端开发的同事的机器上。

by Xudong Zhang @2016-04-23 15:38:45.433 +0800 CST


我来回答

Markdown格式技巧

  • 行尾添加2个空格或者添加一个空行就能换行
  • 斜体: *hello* 或者 _world_
  • 加粗: **hello** 或者 __world__
  • 代码块: 添加空行,然后代码缩进4个空格
  • 特殊字符: 用\避免转义;\*就是*本身
  • python: `__name__`可以以代码形式输出__name__
  • 一个简单的例子

切换到移动版