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

之前是有个想法是把服务端和前端端的代码放在同一个项目中, 并且前端可以直接请求到服务端的数据, 这里用webpack代理转发请求可以实现
文档: https://webpack.js.org/configuration/dev-server/#devserverproxy

本地新建服务端

  • webpack 内置 express框架, 这里直接写个简单的服务端
  • image.pngimage.png
  • 启动服务端 node server.js 并在浏览器打开 http://localhost:3000/api/user
  • image.png

请求服务端数据

  • 在index.js文件中写上客户端请求
  • image.png
  • 此时, 就会报跨域错误:
  • image.png

配置http代理proxy

  • 配置webpack
  • image.png image.png
  • 重新打开本地服务, 即可请求到服务端结果

  • image.png

  • 有时服务端并不会像上面那样总是以api开头写接口, 可能直接写上/user, /home, 此时我们仍然可以写成/api/user, /api/home, 然后在代理配置中重写, 去掉/api, 方便一次配置

  • image.png image.png
  • 将/api重写成空, 这样就可以跨域了
  • image.png