vue开发环境配置跨域的方法步骤


Posted in Javascript onJanuary 16, 2019

本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问

production:产品 生产环境

development:开发 开发环境

1.开发环境设置跨域使用工具:

  • vue-cli自带的配置配置
  • 目录 /config/index.js

vue开发环境配置跨域的方法步骤

//自行复制黏贴
proxyTable: {
 '/apis':{
 target: 'http://10.1.63.26:19080/', // 后台api
 changeOrigin: true, //是否跨域
 // secure: true,
 pathRewrite: {
  '^/apis': '' //需要rewrite的,
 }
 }
}

注意:以上配置只有在生产环境下有效,你打包之后就不起作用了

这样就存在一个问题,你的接口都是/apis开头的,打包之后部署到服务器要去除/apis,才能正常访问后台接口,如何解决呢?

2.生产环境设置跨域

使用工具 axios 中文文档地址

思路

解决的思路是这样的:

首先,axios有一个baseURL的属性,配置了baseURL之后,你访问接口时就会自动带上

假设你vue-cli起了一个开发环境,地址为http://localhost:8080
//例1 当不设置baseURL时
axios.get('/user') //访问/user相当于访问 http://localhost:8080/user

//例2 
axios.baseURL='/apis'
axios.get('/user') //访问/user就相当于访问 http://localhost:8080/apis/user

//例3
axios.baseURL='https://sbsb.com'
axios.get('/user') //访问/user就相当于访问 https://sbsb.com/user

//例4
axios.baseURL='https://sbsb.com/apis'
axios.get('/user') //访问/user就相当于访问 https://sbsb.com/apis/user

然后我们要根据现在的环境是开发环境还是生产环境,配置不同的baseURL

//判断是否是生产环境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于区分是生产环境还是开发环境
//配置不同的baseURL
module.exports = {
 baseURL: isPro ? 'http://sbsb.com:8888/' : '/apis'
}

process.env.NODE_ENV用于区分是生产环境还是开发环境,这个值是webpack设置的

动手操作

假设后台api的rul是http://sbsb.com:8888/

首先在/config目录下新建一个文件,我这里叫api.config.js

写入以下代码

//判断是否是生产环境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于区分是生产环境还是开发环境
//根据环境不同导出不同的baseURL
module.exports = {
 baseURL: isPro ? 'http://sbsb.com:8888/' : '/apis'
}

然后,在main.js中引入axios和刚才那个文件

//main.js
import Vue from 'vue'
import axios from 'axios'
import apiConfig from '../config/api.config.js'
axios.baseURL=apiConfig.baseURL
//axios的其他配置...

这样配置之后,打包部署到服务器上也不用再手工去除/apis

如果配置过程中出现了问题,自己调试,看看访问的url正不正确

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

Javascript 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
深入探讨前端框架react
Dec 09 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 #Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 #Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 #Javascript
Vue 样式绑定的实现方法
Jan 15 #Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 #Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 #Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 #Javascript
You might like
php简单提示框alert封装函数
2010/08/08 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
跨浏览器的事件对象介绍
2012/06/27 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
详解python中requirements.txt的一切
2017/03/03 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python中psutil的介绍与用法
2019/05/02 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
德国高性价比网上药店:medpex
2017/07/09 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
海洋科学专业求职信
2014/08/10 职场文书
大学生实习证明范本
2014/09/19 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
大连星海广场导游词
2015/02/10 职场文书
员工升职自荐信
2015/03/27 职场文书
奖金申请报告模板
2015/05/15 职场文书
2019入党申请书格式
2019/06/25 职场文书
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技