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 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 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
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
python删除列表中重复记录的方法
2015/04/28 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
医学专业五年以上个人求职信
2013/12/03 职场文书
工作中个人的自我评价
2013/12/31 职场文书
单位人事专员介绍信
2014/01/11 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
党支部承诺书范文
2014/03/28 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
Python使用pyecharts控件绘制图表
2022/06/05 Python