webpack proxy 使用(代理的使用)

为什么要写篇文章

这两天的开发中遇到一些需要代理才能解决的问题, 在这里记录一下, 方便以后的查阅.

为什么要用代理

跨域

在开发过程中, 我们的开发环境一般都是http:// localhost, 但是如果需要请求的数据不在本地, 那么我们就需要面对一个跨域请求的问题. 众所周知, 因为浏览器的安全协议, 我们是无法直接进行跨域请求的. 代理就是为了解决这个问题, 当然了你也可以使用jsonp 和 nginx 反向代理.

如何进行代理

webpack 配置

在这里我默认为开发环境的配置

  1. 找到 webpack.config.js 文件
  2. 在 devServer 对象下面加入以下代码
proxy: {
  '/index':{ // 这个是你要替换的位置

  /** 比如你要讲http://localhost:8080/index/xxx 替换成 http://10.20.30.120:8080/sth/xxx
  * 那么就需要将 index 前面的值替换掉, 或者说是替换掉根地址,
  *你可能发现了index也是需要替换的, 没错, 我会在后续操作中处理.
  */

  target: 'http://10.20.30.120:8080'//这个是被替换的目标地址

  changeOrigin: true // 默认是false,如果需要代理需要改成true

  pathRewrite:{
    '^/index' : '/' //在这里 http://localhost:8080/index/xxx 已经被替换成 http://10.20.30.120:8080/
  }}
}

// 然后在你发起请求的js文件中的地址需要忽略http://10.20.30.120:8080/

//比如 demo.js
axios.post({
  url:'http://10.20.30.120:8080/sth/xxx'// 需要替换成下面的地址
  url:'/sth/xxx'
}
)

原理

实际上代理是使用了是利用http-proxy-middleware这个插件完成的, 有兴趣的话可以去搜一下,在这里我就不多做解释了.

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

赞 (0)

相关推荐

  • 详解Webpack-dev-server的proxy用法

    前言 如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用. 解决开发环境的跨域问题(不用在去配置nginx和host, 爽歪歪~~) 在webpack.config.js中配置 下面简单介绍一下五个经常使用的场景 使用一: mmodule.exports = { //... devServer: { proxy: { '/api': 'http://localhost:3000' } } }; 请求到 /api/xxx 现在会被代理到请求

  • webpack+vue-cil中proxyTable处理跨域的方法

    跨域 了解同源政策:所谓"同源"指的是"三个相同". 协议相同 域名相同 端口相同 解决跨域 1.jsonp 缺点:只能get请求 ,需要修改B网站的代码 2.cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容).需要B网站在响应中加头 3.postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容).需要修改B网站的代码 4.iframe window.name 传值得方式很巧妙,兼容性也很好.但是也是需要你能修改B网站代码 5.服务

  • 详解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的proxyTable无效的解决方案

    最近遇到这个需要单页访问跨域后台的问题. 可以按照如下设置: proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewrite: { '^/list': '/list' } } } 这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1. 那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true

  • webpack配置proxyTable时pathRewrite无效的解决方法

    本人webpack版本3.6,webpack-dev-server版本2.9.1,本人按照网上写的版本折腾两天都没通,无意间自己试通了,猜测网上大部分都是照本宣科,没有自己实践 webpack配置接口地址代理 在项目开发中,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问链接,但是我们的接口地址是  http://www.xxx.com/save/post 这样的,我们这样

  • Webpack devServer中的 proxy 实现跨域的解决

    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.confi

  • webpack proxy 使用(代理的使用)

    为什么要写篇文章 这两天的开发中遇到一些需要代理才能解决的问题, 在这里记录一下, 方便以后的查阅. 为什么要用代理 跨域 在开发过程中, 我们的开发环境一般都是http:// localhost, 但是如果需要请求的数据不在本地, 那么我们就需要面对一个跨域请求的问题. 众所周知, 因为浏览器的安全协议, 我们是无法直接进行跨域请求的. 代理就是为了解决这个问题, 当然了你也可以使用jsonp 和 nginx 反向代理. 如何进行代理 webpack 配置 在这里我默认为开发环境的配置 找到

  • vue Proxy数据代理进行校验部分源码实例解析

    vue Proxy数据代理进行校验部分源码实例解析

    目录 initProxy 触发代理 数据过滤 总结 initProxy 数据拦截的思想除了为构建响应式系统准备,它也可以为数据进行筛选过滤,我们接着往下看初始化的代码,在合并选项后,vue接下来会为vm实例设置一层代理,这层代理可以为vue在模板渲染时进行一层数据筛选 Vue.prototype._init = function(options) { // 选项合并 ... { // 对vm实例进行一层代理 initProxy(vm); } ... } initProxy // 代理函数 var

  • webpack中的代理配置详解

    目录 作用: 使用场景一: 使用场景二 使用场景三 使用场景四: 使用场景五: 解决跨域原理 vue-cli中proxyTable配置接口地址代理示例 更多参数 作用: 1.解决开发环境跨域问题(不用再去配置nginx和host) 2.如果你有单独的后端开发服务器API,并希望在同域名下发送API请求,那么代理某些URL会很有用 下面介绍一下五种经常使用的场景 使用场景一: 请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api

  • vue 实现cli3.0中使用proxy进行代理转发

    解决方法: 在vue项目的根目录下添加 vue.config.js文件,文件中需要按照下面写法来写 module.exports = { lintOnSave: true, devServer: { proxy: { // proxy all requests starting with /api to jsonplaceholder '/api': { target: 'http://localhost:8080', //代理接口 changeOrigin: true, pathRewrite

  • 详解Java的Proxy动态代理机制

    详解Java的Proxy动态代理机制

    一.Jvm加载对象 在说Java动态代理之前,还是要说一下Jvm加载对象的过程,这个依旧是理解动态代理的基础性原理: Java类即源代码程序.java类型文件,经过编译器编译之后就被转换成字节代码.class类型文件,类加载器负责读取字节代码,并转换成java.lang.Class对象,描述类在元数据空间的数据结构,类被实例化时,堆中存储实例化的对象信息,并且通过对象类型数据的指针找到类. 过程描述:源码->.java文件->.class文件->Class对象->实例对象 所以通过

  • vue-cil之axios的二次封装与proxy反向代理使用说明

    目录 Axios与proxy反向代理 1.Axios 的特性 2.Axios 的安装 3.Axios 与proxy反向代理的使用 axios反向代理proxy个人理解 使用反向代理proxy的原因 proxy基本配置 Axios与proxy反向代理 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 1.Axios 的特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 PromiseAPI 拦截请求和

  • 详解Java Proxy动态代理机制

    详解Java Proxy动态代理机制

    一.Jvm加载对象 在说Java动态代理之前,还是要说一下Jvm加载对象的过程,这个依旧是理解动态代理的基础性原理: Java类即源代码程序.java类型文件,经过编译器编译之后就被转换成字节代码.class类型文件,类加载器负责读取字节代码,并转换成java.lang.Class对象,描述类在元数据空间的数据结构,类被实例化时,堆中存储实例化的对象信息,并且通过对象类型数据的指针找到类. 过程描述:源码->.java文件->.class文件->Class对象->实例对象 所以通过

  • webpack+vue-cil 中proxyTable配置接口地址代理操作

    在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可: dev: {

  • ES6中Proxy代理用法实例浅析

    本文实例讲述了ES6中Proxy代理用法.分享给大家供大家参考,具体如下: ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作.这个功能非常的有用.举一个例子来说: var engineer = { name: 'Joe Sixpack', salary: 50 }; var interceptor = { set: function (receiver, property, value) { console.log(property, 'is changed to',

  • Java设计模式之代理模式（Proxy模式）介绍

    理解并使用设计模式,能够培养我们良好的面向对象编程习惯,同时在实际应用中,可以如鱼得水,享受游刃有余的乐趣. Proxy是比较有用途的一种模式,而且变种较多,应用场合覆盖从小结构到整个系统的大结构,Proxy是代理的意思,我们也许有代理服务器等概念,代理概念可以解释为:在出发点到目的地之间有一道中间层,意为代理. 设计模式中定义:为其他对象提供一种代理以控制对这个对象的访问. 为什么要使用代理模式 1.授权机制 不同级别的用户对同一对象拥有不同的访问权利,如Jive论坛系统中,就使用Proxy进

随机推荐