Vue中如何实现proxy代理


Posted in Javascript onApril 20, 2018

Vue 框架开发的时候,会遇到跨域的问题,可在config/index.js 里配置proxyTable内容,使用proxy 代理。

// config/index.js 文件
proxyTable: {
   '/api': {
    target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号
    changeOrigin: true,   // 跨域
    pathRewrite: {
     '^/api': '/'     
    }
   }
  },

这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://192.168.149.90:8080/xxx/duty?time=2017-07-07 14:57:22',直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可

在dev.env.js 里配置开发环境请求地址

// config/dev.env.js 文件
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 ADMIN_SERVER: '"/api/"',
});

若请求插件用的 axios,配置如下

const adminServer = axios.create({
 baseURL: process.env.ADMIN_SERVER,
});

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

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
vue实现路由切换改变title功能
May 28 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
React diff算法的实现示例
Apr 20 #Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 #Javascript
node实现登录图片验证码的示例代码
Apr 20 #Javascript
vue项目中api接口管理总结
Apr 20 #Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 #jQuery
js Element Traversal规范中的元素遍历方法
Apr 19 #Javascript
关于vue中的ajax请求和axios包问题
Apr 19 #Javascript
You might like
PHP 无限级分类
2017/05/04 PHP
Javascript Select操作大集合
2009/05/26 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
vue.js中created方法作用
2018/03/30 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python flask安装和命令详解
2019/04/02 Python
Python imread、newaxis用法详解
2019/11/04 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
伦敦一卡通:The London Pass
2018/11/30 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
见习期自我鉴定范文
2014/03/19 职场文书
商铺租赁意向书
2014/04/01 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
村委会贫困证明范本
2014/09/17 职场文书
行为规范主题班会
2015/08/13 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers