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 开发规范要求(图文并茂)
Jun 11 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
js document.write()使用介绍
Feb 21 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
浅谈React碰到v-if
Nov 04 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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
2006/12/23 PHP
Adodb的十个实例(清晰版)
2006/12/31 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python模块之StringIO使用示例
2015/04/08 Python
Python内置函数dir详解
2015/04/14 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
python验证码识别的示例代码
2017/09/21 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python之列表实现栈的工作功能
2019/01/28 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
二人合伙经营协议书
2014/09/13 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
购房委托书
2014/10/15 职场文书
基层党组织整改方案
2014/10/25 职场文书
担保书格式
2015/01/20 职场文书
三峡导游词
2015/01/31 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
800字作文之大雪
2019/12/04 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers