这一章节的代码位于 07_dev_cross_domain/7_3_front_and_back_listen_same_port

前后端运行与同一端口

之前的7.1做法其实是启动了两个服务端, 通过服务端直接请求数据来跨域, webpack中可以使用中间件, 将服务端和前端都启动在同一个端口, 省去启动两次服务端

  • 中间需要用到插件 webpack-dev-middleware 中间件原理
  • 文档: https://webpack.js.org/guides/development/#using-webpack-dev-middleware
  • 安装 yarn add webpack-dev-middleware -D
  • 编辑服务端代码, 引入webpack和中间件插件:
  • image.png
  • 之后直接运行服务端 node server.js
  • image.png
  • 可以发现启动服务端的同时也启动了webpack
  • 此时, 通过浏览器打开服务端的接口, 可以看到返回数据:
  • image.png
  • 同时, 直接打开 http://localhost:3000 相当于打开启动的前端端口, 也能拿到结果:
  • image.png