gulpfile.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var gulp = require('gulp'); var webserver = require('gulp-webserver'); gulp.task('webserver', function () { gulp.src('./') .pipe(webserver({ host: 'localhost', port: 3000, livereload: true, open: './pages/myPages/login.html', directoryListing: { enable: true, path: './' }, proxies: [ { source: '/api', target: 'http://jsonplaceholder.typicode.com' } ] })) }); gulp.task('default', ['webserver'], function () { console.log('成功'); }); |
1、在本地起一个服务，端口号为3000。 2、open：默认打开的文件的路径 3、directoryListing：是否显示文件列表 4、proxies： 设置代理 接口调用： 接口调用 url http://localhost:3000/api 作者：动次动次forever 链接：https://www.jianshu.com/p/237bc5c04fa1 来源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
View Details为什么需要使用代理？ 目前，前端发展飞速，前后端分离式开发已经不是新鲜事儿。 1 如果前端只是静态的页面（不需要调用后端的api加载动态数据），那么前端直接在本地开发即可。 即使是前后端分开部署，只需要单独为前端启动一个服务，使用gulp-connect即可。不会？（请戳gulp之用gulp-connect开启一个本地webServer） 2 如果前端需要调用后端提供的接口呢？除非前后端部署在同一个服务器上，否则由于浏览器的限制是没办法跨域请求数据的。真实情况是，我们在本地开发时就需要访问接口，这时后端的程序猿给你的往往是这样一个地址 http://192.168.1.123/controller/action，有人说上传代码到http://192.168.1.123/放在一个目录下不就行了，是啊！可以的。但是好麻烦有没有，调试接口需要传代码上去！！！！ 3 如果我的数据是从其他的服务器来的呢？例如我想访问豆瓣的开放接口
|
1 2 3 4 |
$.post(<span class="hljs-string">'https://api.douban.com/v2/book/1220562'</span>,{},<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{ <span class="hljs-built_in">console</span>.log(data); }) |
豆瓣告诉你，不行！你跨域了！ 所以，还是代理来的方便。 代理是个什么鬼？ 代理请求通俗点讲，就是把发往 a.com的请求，通过代理服务器发送到b.com。 怎么开启一个代理？ 代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<span class="hljs-comment">//服务端口</span> <span class="hljs-keyword">const</span> PORT=<span class="hljs-number">8000</span>; <span class="hljs-comment">//启动服务的根目录</span> <span class="hljs-keyword">const</span> server_root=<span class="hljs-string">'src'</span> <span class="hljs-comment">//引用gulp</span> <span class="hljs-keyword">var</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>); <span class="hljs-comment">//引用gulp开启服务的插件</span> <span class="hljs-keyword">var</span> connect = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-connect'</span>); <span class="hljs-comment">//引用插件 gulp代理中间件插件</span> <span class="hljs-keyword">var</span> proxy = <span class="hljs-built_in">require</span>(<span class="hljs-string">'http-proxy-middleware'</span>); <span class="hljs-comment">//开启服务</span> gulp.task(<span class="hljs-string">'proxyServer'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{ connect.server({ <span class="hljs-attr">root</span>: [server_root], <span class="hljs-attr">port</span>: PORT, <span class="hljs-attr">middleware</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">connect, opt</span>) </span>{ <span class="hljs-keyword">return</span> [ proxy(<span class="hljs-string">'/api'</span>, { <span class="hljs-attr">target</span>: <span class="hljs-string">'https://api.douban.com/v2'</span>,<span class="hljs-comment">//代理的目标地址</span> changeOrigin:<span class="hljs-literal">true</span>,<span class="hljs-comment">//</span> pathRewrite:{<span class="hljs-comment">//路径重写规则 </span> <span class="hljs-string">'^/api'</span>:<span class="hljs-string">''</span> } }) ] } }); }); |
说明 '/api' =>匹配你要代理的请求地址前缀 target=》你要把请求代理到哪 pathRewrite =》是把你再页面中写的请求地址 某部分 重写为后面的字符串 (例子中讲 请求中写的 /api 重写为 空字符串) 也就是发往 /api/book/1220562的请求最终会被发往 https://api.douban.com/v2/book/1220562 页面写请求时的写法
|
1 2 3 4 |
$.post(<span class="hljs-string">'/api/book/1220562'</span>,{},<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{ <span class="hljs-built_in">console</span>.log(data); }) |
目录结构 image.png 运行效果 image.png 结语 当然还有其他的方式，比如 node、cros、jsonp、phpheader、nginx设置代理 作者：coder_turbo 链接：https://www.jianshu.com/p/cc543fd0d7c5 来源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
View Details