详解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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
mailto的使用技巧分享
Dec 21 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
js绘制一条直线并旋转45度
Aug 21 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
php5中类的学习
2008/03/28 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
Javascript中的 “&” 和 “|” 详解
2017/02/02 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
在python中创建指定大小的多维数组方式
2019/11/28 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
公司离职证明范本
2014/01/13 职场文书
大学生就业意向书范文
2014/04/01 职场文书
财务部绩效考核方案
2014/05/04 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
一个都不能少观后感
2015/06/04 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python