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鼠标停止移动事件
Dec 21 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
JS排序之快速排序详解
Apr 08 Javascript
JavaScript 巧学巧用
May 23 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
js+canvas实现刮刮奖功能
Sep 13 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强制运行广告的方法
2014/12/01 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
护士毕业生自我鉴定
2014/02/08 职场文书
人事文员岗位职责
2014/02/16 职场文书
大课间体育活动方案
2014/03/12 职场文书
高中教师考核方案
2014/05/18 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
班级管理经验交流材料
2015/11/02 职场文书
如何书写授权委托书?
2019/06/25 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
Java完整实现记事本代码
2022/06/16 Java/Android