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 相关文章推荐
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
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
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
php调用C代码的实现方法
2014/03/11 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
jquery创建div 实现代码
2009/04/27 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
学生打架检讨书1000字
2014/01/16 职场文书
《春天来了》教学反思
2014/04/07 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL