vue proxyTable 接口跨域请求调试的示例


Posted in Javascript onSeptember 12, 2017

在不同域之间访问是比较常见,在本地调试访问远程服务器。。。。这就是有域问题。

VUE解决通过proxyTable:

在 config/index.js 配置文件中

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  //proxyTable: {},
  proxyTable: proxyConfig.proxyList,
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
 }

划红线部分就是设置代理参数:

在config目录创建,proxyConfig.js 写入

module.exports = {
 proxyList: {
    '/apis': {
      // 测试环境
      target: 'https://goods.footer.com', // 接口域名
      changeOrigin: true, //是否跨域
      pathRewrite: {
        '^/apis': ''  //需要rewrite重写的,
      }       
    }
 }
}

在 config/index.js 配置文件上边引入

var proxyConfig = require('./proxyConfig')

vue proxyTable 接口跨域请求调试的示例

使用:

服务器提供接口:https://goods.footer.com/health/list

Vue请求

var obj = {
  pageSize: 20
}
this.$http.get( '/apis/health/list',{params: obj})
      .then(function(res){
    // 成功回调
      },function(){
       alert("error")
      })

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

Javascript 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
js封装成插件_Canvas统计图插件编写实例
Sep 12 #Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 #Javascript
详解angular笔记路由之angular-router
Sep 12 #Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 #jQuery
vue引入jq插件的实例讲解
Sep 12 #Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 #jQuery
BootStrap实现文件上传并带有进度条效果
Sep 11 #Javascript
You might like
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
详解vue在项目中使用百度地图
2019/03/26 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python+pyqt实现12306图片验证效果
2017/10/25 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
TensorFlow变量管理详解
2018/03/10 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
平面设计自荐信
2013/10/07 职场文书
个人自我鉴定
2013/11/07 职场文书
股权转让协议书
2014/04/12 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
黄埔军校观后感
2015/06/10 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
MongoDB balancer的使用详解
2021/04/30 MongoDB