为什么需要使用代理?
目前, 前端发展飞速, 前后端分离式开发已经不是新鲜事儿
1 如果前端只是静态的页面 (不需要调用后端的 api 加载动态数据), 那么前端直接在本地开发即可
即使是前后端分开部署, 只需要单独为前端启动一个服务, 使用 gulp-connect 即可不会?(请戳 gulp 之用 gulp-connect 开启一个本地 webServer)
2 如果前端需要调用后端提供的接口呢? 除非前后端部署在同一个服务器上, 否则由于浏览器的限制是没办法跨域请求数据的真实情况是, 我们在本地开发时就需要访问接口, 这时后端的程序猿给你的往往是这样一个地址
http://192.168.1.123/controller/action
, 有人说上传代码到 http://192.168.1.123 / 放在一个目录下不就行了, 是啊! 可以的但是好麻烦有没有, 调试接口需要传代码上去!!!!
3 如果我的数据是从其他的服务器来的呢? 例如我想访问豆瓣的开放接口
- $.post('https://api.douban.com/v2/book/1220562',{},function(data){
- console.log(data);
- })
豆瓣告诉你, 不行! 你跨域了!
所以, 还是代理来的方便
代理是个什么鬼?
代理请求通俗点讲, 就是把发往 a.com 的请求, 通过代理服务器发送到 b.com
怎么开启一个代理?
代码如下:
- // 服务端口
- const PORT = 8000;
- // 启动服务的根目录
- const server_root = 'src'
- // 引用 gulp
- var gulp = require('gulp');
- // 引用 gulp 开启服务的插件
- var connect = require('gulp-connect');
- // 引用插件 gulp 代理中间件插件
- var proxy = require('http-proxy-middleware');
- // 开启服务
- gulp.task('proxyServer',
- function() {
- connect.server({
- root: [server_root],
- port: PORT,
- middleware: function(connect, opt) {
- return [proxy('/api', {
- target: 'https://api.douban.com/v2',
- // 代理的目标地址
- changeOrigin: true,
- //
- pathRewrite: { // 路径重写规则
- '^/api': ''
- }
- })]
- }
- });
- });
说明
'/api' => 匹配你要代理的请求地址前缀
target = 你要把请求代理到哪
pathRewrite = 是把你再页面中写的请求地址 某部分 重写为后面的字符串
(例子中讲 请求中写的 /api 重写为 空字符串)
也就是发往 /api/book/1220562 的请求最终会被发往 https://api.douban.com/v2/book/1220562
页面写请求时的写法
- $.post('/api/book/1220562',{},function(data){
- console.log(data);
- })
目录结构
image.png
运行效果
image.png
结语
当然还有其他的方式, 比如 nodecrosjsonpphpheadernginx 设置代理
来源: http://www.jianshu.com/p/cc543fd0d7c5