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插入节点appendChild insertBefore使用方法
Jul 04 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
javascript时区函数介绍
Sep 14 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
Vue前端开发规范整理(推荐)
Apr 23 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
详解python对象之间的交互
2020/09/29 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
班级文化建设标语
2014/06/23 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers