详解Webpack-dev-server的proxy用法


Posted in Javascript onSeptember 08, 2018

前言

如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。

解决开发环境的跨域问题(不用在去配置nginx和host, 爽歪歪~~)

在webpack.config.js中配置

下面简单介绍一下五个经常使用的场景

使用一:

mmodule.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user

使用二

如果你想要代码多个路径代理到同一个target下, 你可以使用由一个或多个「具有 context 属性的对象」构成的数组:

module.exports = {
  //...
  devServer: {
    proxy: [{
      context: ['/auth', '/api'],
      target: 'http://localhost:3000',
    }]
  }
};

使用三:

如果你不想始终传递 /api ,则需要重写路径:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/user

使用四:

默认情况下,不接受运行在 HTTPS 上,且使用了无效证书的后端服务器。如果你想要接受,只要设置 secure: false 就行。修改配置如下:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

使用五:

有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。

在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径,来跳过代理请求。

例如:对于浏览器请求,你想要提供一个 HTML 页面,但是对于 API 请求则保持代理。你可以这样做:

module.exports = {
 //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        }
      }
    }
  }  
};

解决跨域原理

上面的参数列表中有一个changeOrigin参数, 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求,

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      }
    }
  }
};

vue-cli中proxyTable配置接口地址代理示例

修改 config/index.js

module.exports = {
  dev: {
  // 静态资源文件夹
  assetsSubDirectory: 'static',
  // 发布路径
  assetsPublicPath: '/',

  // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
  // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
  proxyTable: {
    // 例如将'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx'
    '/api': {
      target: 'https://wangyaxing.cn', // 接口的域名
      secure: false, // 如果是https接口,需要配置这个参数
      changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
    },
    // 例如将'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx'
    '/img': {
      target: 'https://cdn.wangyaxing.cn', // 接口的域名
      secure: false, // 如果是https接口,需要配置这个参数
      changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
      pathRewrite: {'^/img': ''} // pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。
    }
  },
  // Various Dev Server settings
  host: 'localhost', // can be overwritten by process.env.HOST
  port: 4200, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}

更多参数

dev-server 使用了非常强大的http-proxy-middleware , http-proxy-middleware 基于 http-proxy 实现的,可以查看 http-proxy 的源码和文档:https://github.com/nodejitsu/node-http-proxy。

  • target:要使用url模块解析的url字符串
  • forward:要使用url模块解析的url字符串
  • agent:要传递给http(s).request的对象(请参阅Node的https代理和http代理对象)
  • ssl:要传递给https.createServer()的对象
  • ws:true / false,是否代理websockets
  • xfwd:true / false,添加x-forward标头
  • secure:true / false,是否验证SSL Certs
  • toProxy:true / false,传递绝对URL作为路径(对代理代理很有用)
  • prependPath:true / false,默认值:true - 指定是否要将目标的路径添加到代理路径
  • ignorePath:true / false,默认值:false - 指定是否要忽略传入请求的代理路径(注意:如果需要,您必须附加/手动)。
  • localAddress:要为传出连接绑定的本地接口字符串
  • changeOrigin:true / false,默认值:false - 将主机标头的原点更改为目标URL

参考

官方文档
http-proxy-middleware
node-http-proxy
API Proxying During Development

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 #Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 #Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 #Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 #Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 #Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 #jQuery
You might like
wordpress之wp-settings.php
2007/08/17 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
asp 的 分词实现代码
2007/05/24 Javascript
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
python实现文件快照加密保护的方法
2015/06/30 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python实现12306火车票抢票系统
2019/07/04 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
2015年感恩父亲节演讲稿
2015/03/19 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
解决python存数据库速度太慢的问题
2021/04/23 Python
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle