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. HH去散步(bzoj 1875)

    Description HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但是同时HH又是个喜欢变化的人,所以他不会立刻沿着刚刚走来的路走回. 又因 ...

  2. 洛谷 [P3338] 力

    FFT \[E_i = F_i / q_i = \sum_{i<j} \frac {q_j} {(i - j)^2} - \sum _{ i > j} \frac{q _ j} {(i - ...

  3. 【HDOJ5972】Regular Number(Bitset,ShiftAnd)

    题意:给你N位数,接下来有N行,第i行先输入n,表示这个数的第i 位上可以在接下来的n个数中挑选,然后i 行再输n个数. 然后输入需要匹配的母串,让你输出母串中有多少个可行的N位子串. n<=1 ...

  4. 呵呵呵呵。。。系统还原了,终于可以用IE登陆百度了

    原文发布时间为:2009-12-19 -- 来源于本人的百度文章 [由搬家工具导入] 呵呵呵呵。。。今天终于有时间把系统还原了,终于可以用IE登陆百度了

  5. poj 2528 Mayor's posters 线段树 || 并查集 离线处理

    题目链接 题意 用不同颜色的线段覆盖数轴,问最终数轴上有多少种颜色? 注:只有最上面的线段能够被看到:即,如果有一条线段被其他的线段给完全覆盖住,则这个颜色是看不到的. 法一:线段树 按题意按顺序模拟 ...

  6. C语言字符串操作总结大全(超详细)【转】

    转自:http://www.jb51.net/article/37410.htm )字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strc ...

  7. 測試 電池溫度的 batch file

    無限迴圈, 執行讀取 電池溫度, @echo off adb root :loop echo %date% %time% adb shell "cat /sys/class/power_su ...

  8. jenkins下脚本权限问题

    在jenkins环境下,执行需要root权限的脚本,报错. 修改方法: 1. centos环境下,在/etc/sudoers.d/ 目录下,增加一个 jenkins文件,内容如下: Defaults: ...

  9. Codeforces Gym100971 F.Two Points (IX Samara Regional Intercollegiate Programming Contest Russia, Samara, March 13)

    这个题直接推公式就可以. 就是解一元二次方程,用高中学的公式,函数开口向上,求最大值为(4ac-b*b)/4a. 这个题推出来一元二次方程,然后将最大值的公式化简一下.公式很好推. 这个题有疑问,in ...

  10. (转)C++常用函数汇总

    1.标准C++库字符串类std::string的用法 begin       得到指向字符串开头的Iterator end       得到指向字符串结尾的Iterator rbegin        ...