Vue-cli proxyTable 解决开发环境的跨域问题

字数474 阅读1685 评论1 喜欢3

和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名。
今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然。在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,使用的就是这个参数。
https://vuejs-templates.github.io/webpack/proxy.html
这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化,例如我们要请求的地址是api.xxxxxxxx.com/list/1,可以按照如下设置:

proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}

这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。增加的代码如下所示:

proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': ''
}
}
}

vue-cli的这个设置来自于其使用的插件http-proxy-middleware
github:https://github.com/chimurai/http-proxy-middleware
深入了解的话可以看该插件配置说明,似乎还支持websocket,很强大的插件。

vue proxyTable的更多相关文章

  1. vue proxyTable 接口跨域请求调试

    在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: requir ...

  2. vue proxyTable 接口跨域请求调试(五)

    在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable: 在 config/index.js 配置文件中 dev: { env: requir ...

  3. Vue proxyTable 解决开发环境的跨域问题

    在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...

  4. vue proxyTable代理 解决开发环境的跨域问题

    如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 可以设置代理为: dev:{ assetsSubDirectory: 'static',// 静态资源文件夹 assetsPub ...

  5. vue proxyTable 跨域问题。

  6. 第25月第18天 vue

    1.cnpm sudo chown -R $USER /usr/local  npm install -g cnpm --registry=https://registry.npm.taobao.or ...

  7. vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址

    一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...

  8. 第25月第4天 Blog-API-with-Django-Rest-Framework项目记录01

    #------------------------------ 1. djangochinaorg项目 https://github.com/DjangoChinaOrg/Django-China-A ...

  9. 解决vue-cli项目开发中跨域问题

    一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...

随机推荐

  1. 创建 router 连通 subnet

    上一节我们为 Neutron 虚拟路由器配置好了 L3 agent,今天将创建虚拟路由器“router_100_101”,打通 vlan100 和 vlan101. 打开操作菜单 Project -& ...

  2. HDOJ 2222: Keywords Search

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  3. 【HDOJ5996】dingyeye loves stone(Nim游戏)

    题意:dingyeye喜欢和你玩石子游戏.dingyeye有一棵n个节点的有根树,节点编号为0到n−1,根为0号节点. 游戏开始时,第i个节点上有a[i]个石子.两位玩家轮流操作,每次操作玩家可以选择 ...

  4. *LOJ#2085. 「NOI2016」循环之美

    $n \leq 1e9,m \leq 1e9,k \leq 2000$,求$k$进制下$\frac{x}{y}$有多少种不同的纯循环数取值,$1 \leq x \leq n,1 \leq y \leq ...

  5. java通过反射获取私有的构造方法,及反射擦除泛型数据类型约束

    /* * 反射获取私有的构造方法运行 * 不推荐,破坏了程序的安全性,封装性 * 暴力私有 */ public class ReflectDemo4 { public static void main ...

  6. 【BZOJ1562】【jzyzOJ1730】【COGS409】NOI2009变换序列 二分图匹配

    [问题描述]        对于N个整数0, 1, ……, N-1,一个变换序列T可以将i变成Ti,其中 定义x和y之间的距离.给定每个i和Ti之间的距离D(i,Ti), 你需要求出一个满足要求的变换 ...

  7. ssh免秘钥登陆实现

    1.用处 搭建集群或者工作中登陆跳板机经常需要做免秘钥互相登陆彼此服务器. 2. 准备工作   假设A主机10.20.0.1想通过ssh登录到B主机10.20.0.2上.   那么客户端(A主机)需要 ...

  8. 聊聊、Zookeeper 客户端 ZkClient

    [ZkClient]  ZkClient 是 GitHub 上一个开源的客户端,如果我们用 Maven 来管理工程,则引用如下. <dependency> <groupId>o ...

  9. HTTP协议header头域

    HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内 容请参考RFC2616.HTTP协议采用了请求/响应模型.客 ...

  10. 了解什么是WebLogic Server 多数据源(Multi-DataSource)

      1. 什么是多数据源 我们知道配置WebLogic Server集群时一定要配置一个单一接入点(例如:Apache或F5),这样客户端只要访问这个单一入口点就可以了.对于客户来说,就好象访问一台服 ...