本章主要就是一个东西, 如何配置 webpack 的 devServer.proxy 实现代理转发. 这个应该是日常开发事情中必见的内容了.
Git 仓库: webpack-demo
1, 开始
既然是请求数据, 那么就先安装下 axios.
- $ cd chapter10
- $ NPM install axios --save
然后我们在 src/index.JS 文件中使用 axios 请求一下豆瓣 API 的接口, 拿它电影的前 250 条数据.
- + import axios from "axios";
- // ...
- // 测试 devServer.proxy 实现数据的代理转发
- + axios
- + .get("http://douban.uieee.com/v2/movie/top250?start=25&count=25")
- + .then(function(response) {
- + console.log("请求数据:", response.data);
- +
- });
然后 NPM run start 启动服务, 然后我们在浏览器中就可以看到数据被请求成功了.
2, 相关问题
为什么我们可以一步就请求拿到了数据, 好像没轮到 devServer.porxy 什么事情. 那是因为豆瓣 API 没有对请求接口客户端来源没有做任何的限制, 允许你跨域请求啊等等, 但在真实的开发场景中是不切实际的.
在我们的开发中, 请求的协议和域名是会变的, 协议有 http,https 的变换, 域名有测试域名, 线上域名等等在不同的开发阶段被调用, 你不能手动的替换每个请求的接口域名.
所以一般我们是把上图中红框这一块移除, 那么我们肯定就请求不到数据了.
- // ...
- + axios
- - .get("http://douban.uieee.com/v2/movie/top250?start=25&count=25")
- + .get("/v2/movie/top250?start=25&count=25")
- + .then(function(response) {
- + console.log("请求数据:", response.data);
- +
- });
3,proxy 代理
为了解决上述问题, 我们需要配置 devServer.proxy, 进入到我们的 webpack.config.JS 中.
- var path = require('path');
- module.exports = {
- // ...
- devServer: {
- contentBase: path.join(__dirname, 'dist'),
- port: 8080,
- open: true,
- + proxy: {
- + "/v2": {
- + target: "http://douban.uieee.com",
- + pathRewrite: { "^/v2": "/v2" },
- + secure: false,
- + changeOrigin: true,
- + }
- + }
- }
- // ...
- };
target: 把带有 / v2 的接口代理到请求 target 设置的这个服务器, 就相对于请求
http://douban.uieee.com/v2/movie/top250?start=25&count=25
pathRewrite: 可以把请求接口中的某部分重写,
上面这个只是为了演示这个属性,^/v2 是个正则, 把所有 / v2 开头的都重写 / v2, 我们 axios 接口里本来就是以这个开头的, 所相当于啥事没干, 单纯演示.
你可以改
pathRewrite: { "/movie": "/music" }
, 把请求电影的的改为请求音乐的; 还有一种比较在 axios 封装中比较常见的就是
pathRewrite: { "^/api": "/" }
, 把所有以 / API 开头的就这串字符都删掉. 不扯了不扯了.
secure: 允许 https 协议.
changeOrigin: 设置为 ture 表示允许跨域.
4, 小结
讲的有点啰嗦, 因为这部分内容比较常见, 很多朋友这里也经常困惑, 其实官网里这部分讲的很详细了, 大家可以去看看.
基本内容就这么点, 我这里只是抛砖引玉一下.
参考链接:
devServer.proxy
来源: http://www.jianshu.com/p/84342ffb40bd