本章主要就是一个东西,如何配置webpack的devServer.proxy实现代理转发。这个应该是日常开发事情中必见的内容了。 git仓库:webpack-demo
$ 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
启动服务,然后我们在浏览器中就可以看到数据被请求成功了。
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);
+ });
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表示允许跨域。参考链接: devServer.proxy