vue-cli中vue本地实现跨域调试接口


Posted in Javascript onJanuary 16, 2019

使用vue的同学们大都是基于vue-cli来搭建项目的,vue-cli中的配置全面强大。

// 常用的命令
npm run dev // 本地热更新模式
npm run build //生产模式 会在根目录下打包出一个dist文件夹,直接放在服务器上就可以使用了

开发阶段与后台同学进行数据交互(调试接口) 本机与服务器之间会出现跨域问题

vue-cli中vue本地实现跨域调试接口

跨域报错

解决办法

npm run dev执行后,项目会在本地node中执行。vue-cli中提供了非常方便的代理方式。

直接上代码 根目录/config/index.js 中,搜索 proxyTable ,把它改成如下对象

proxyTable: {
   '/api': { //使用"/api"来代替"http://baidu.com"
    target: 'http://baidu.com', //源地址
    changeOrigin: true, //改变源
    pathRewrite: {
     '^/api': '/' //路径重写
    }
   }
 }

这段代码的意思是用 /api 带代替请求地址的域名

为了方便使用,需要不同环境下的不同配置

根目录/config/dev.env.js 这里面是本地dev环境的配置

module.exports = merge(prodEnv, {
 // 你的其他的一些配置。。。
 // 。。。
 // 本地调试环境下的请求地址/api
 // 对应代理的/api配置
 API_ROOT: '"/api"',
})

根目录/config/prod.env.js 这里面是生产build环境的配置

module.exports = {
 // 你的其他的一些配置。。。
 // 。。。
 API_ROOT:'"实际生产环境的请求地址"',
}

修改类似执行配置都需要

重新 npm run dev
重新 npm run dev
重新 npm run dev

配置完工后,我们找到 src/main.js

这里用axios为例

import Vue from 'vue'
import axios from 'axios'

// process.env.API_ROOT就得到了上面不同环境下的API_ROOT
const baseUrl = process.env.API_ROOT
// 把baseUrl挂载到Vue原型上,方便组件内部使用
Vue.prototype.baseUrl = baseUrl;
// axios也挂载到原型上 this.$http就指向axios
Vue.prototype.$http = axios;

OK,一切配置就绪,我们在任一地方就可以使用了

// 组件内使用axios
// 不同的配置下,this.baseUrl的值就不同
this.$http.post(`${this.baseUrl}/aaa/xxx`, {
 id: 123
}).then(res => {
 // 请求成功。。。
})

所有配置已完成

需要注意的是

vue-cli中vue本地实现跨域调试接口

本地环境下查看浏览器的Network

本地环境下,请求的ip地址变成了本机的ip,后面还会跟上一个 /api ,说明代理是成功的。

例如浏览器上请求地址(这是代理地址)

192.168.0.0:8080/api/xxx

但其实真正请求的地址是

根目录/config/index.js配置的地址 + /xxx

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

Javascript 相关文章推荐
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 #Javascript
深入koa-bodyparser原理解析
Jan 16 #Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 #jQuery
详解微信小程序之scroll-view的flex布局问题
Jan 16 #Javascript
vue开发环境配置跨域的方法步骤
Jan 16 #Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 #Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 #Javascript
You might like
PHP4实际应用经验篇(7)
2006/10/09 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php简单的会话类代码
2011/08/08 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
Python比较两个图片相似度的方法
2015/03/13 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
python追加元素到列表的方法
2015/07/28 Python
python基础教程之Filter使用方法
2017/01/17 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python获取引用对象的个数方式
2019/12/20 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
幼儿园运动会加油词
2014/02/14 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
反腐倡廉观后感
2015/06/08 职场文书