详解Webpack-dev-server的proxy用法

前言

如果你有单独的后端开发服务器 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

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

(0)

相关推荐

  • 详解webpack-dev-server使用http-proxy解决跨域问题

    文档资料 webpack关于webpack-dev-server开启proxy的官方介绍 Vue-cli proxyTable 解决开发环境的跨域问题--虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的 http-proxy-middleware--webpack-dev-server的实现方法其实是对这个的封装 配置http-proxy 在webpack的配置文件(webpack.config.js)中进行配置 module.exports = { ...此处省略

  • 详解webpack之scss和postcss-loader的配置

    本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • 详解webpack的文件监听实现(热更新)

    前言 文件监听是在源码发生变化时,自动重新构建出新的输出文件. webpack 开启监听模式,有两种方式: 1.启动 webpack 命令时,带上 --watch 参数.  唯一缺点:需要手动刷新才能看到变化: 2.在配置 webpack.config.js 中设置 watch: true.  优点: (1) WDS 不刷新浏览器 (2) WDS 不输出文件,⽽是放在内存中 (3) 使⽤用 HotModuleReplacementPlugin 插件 1 第一种方式, --watch 1.1 配置

  • 详解删除SQL Server 2005 Compact Edition数据库

    详解删除SQL Server 2005 Compact Edition数据库 本主题将介绍如何删除 Microsoft SQL Server 2005 Compact Edition (SQL Server Compact Edition) 数据库.由于 SQL Server Compact Edition 数据库是文件系统中的文件,因此需要通过删除文件来删除 SQL Server Compact Edition 数据库. 删除 SQL Server Compact 数据库 调用 System.

  • 实例详解Android Selector和Shape的用法

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和selector在美化控件中的作用是至关重要的. 1:Selector drawable的item中可以有以下属性: android:drawable="@[package:]drawable/drawable_resource" android:state_pressed=["

  • 详解webpack babel的配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用 首先

  • 关于Webpack dev server热加载失败的解决方法

    利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not

  • 详解webpack 打包文件体积过大解决方案(code splitting)

    优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件

  • 详解webpack 入门与解析

    每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但

  • 详解python statistics模块及函数用法

    本节介绍 Python 中的另一个常用模块 -- statistics模块,该模块提供了用于计算数字数据的数理统计量的函数.它包含了很多函数,具体如下表: 名称 描述 mean() 数据的算术平均数("平均数") harmonic_mean() 数据的调和均值 median() 数据的中位数(中间值) median_low() 数据的低中位数 median_high() 数据的高中位数 median_grouped() 分组数据的中位数,即第50个百分点 mode() 离散的或标称的数

随机推荐