如何在vue里面优雅的解决跨域(路由冲突问题)


Posted in Javascript onJanuary 20, 2019

如何在vue里面优雅的解决跨域,路由冲突问题

当我们在路由里面配置成以下代理可以解决跨域问题

proxyTable: {
   '/goods/*': {
    target: 'http://localhost:3000'
   },
   '/users/*': {
    target: 'http://localhost:3000'
   }
  },

这种配置方式在一定程度上解决了跨域问题,但是会带来一些问题,

比如我们的vue 路由 也命名为 goods,这时候就会产生了冲突,

如果项目中接口很多,都在这里配置是很麻烦的,也容易产生路由冲突。

正确的姿势

如果把所有的接口,统一规范为一个入口,在一定程度上会解决冲突

把以上配置统一前面加上 /api/

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000'
   },
  },

如果我们配置成这种方式,在使用http请求的时候就会发生变化,会在请求前面加上一个api,相对路由也会发生变化,也会在接口前面加上api,这样也会很麻烦,我们可以使用以下方式来解决这个问题

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000',
    pathRewrite:{
     '^/api':'/'
    }
   },
  },

上面这个代码,就是把咱们虚拟的这个api接口,去掉,此时真正去后端请求的时候,不会加上api这个前缀了,那么这样我们前台http请求的时候,还必须加上api前缀才能匹配到这个代理,代码如下:

logout(){
  axios.post('/api/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  axios.post('/api/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

我们可以利用axios的baseUrl直接默认值是 api,这样我们每次访问的时候,自动补上这个api前缀,就不需要我们自己手工在每个接口上面写这个前缀了

在入口文件里面配置如下:

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = 'api'

如果这配置 'api/' 会默认读取本地的域

上面这样配置的话,不会区分生产和开发环境

在config 文件夹里面新建一个 api.config.js 配置文件

const isPro = Object.is(process.env.NODE_ENV, 'production')

module.exports = {
 baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

然后在main.js 里面引入,这样可以保证动态的匹配生产和开发的定义前缀

import apiConfig from '../config/api.config'

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl

经过上面配置后,在dom里面可以这样轻松的访问,也不需要在任何组件里面引入axios模块了。

logout(){
  this.$http.post('/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  this.$http.post('/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

最终代码

在代理里面配置
 

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000',
    pathRewrite:{
     '^/api':'/'
    }
   },
  },

在config里面的api.config.js 配置

在config 文件夹里面新建一个 api.config.js 配置文件

const isPro = Object.is(process.env.NODE_ENV, 'production')

module.exports = {
 baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

关于生产和开发配置不太了解

可以去 dev-server.js 里面看配置代码

const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production') ?
 require('./webpack.prod.conf') :
 require('./webpack.dev.conf')

在main.js 入口文件里面配置

import apiConfig from '../config/api.config'

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl
在dom里面请求api的姿势
 logout(){
  this.$http.post('/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  this.$http.post('/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

vuejs项目生产环境,上线解决跨域问题,请看以下文章

vue项目上线 看看这个文章,专门讲上线的

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

Javascript 相关文章推荐
用JQUERY增删元素的代码
Feb 14 Javascript
javascript实现Table排序的方法
May 15 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
jQuery实现增删改查
Dec 22 jQuery
JavaScript禁用右键单击优缺点分析
Jan 20 #Javascript
JavaScript中concat复制数组方法浅析
Jan 20 #Javascript
JavaScript中import用法总结
Jan 20 #Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 #Javascript
js序列化和反序列化的使用讲解
Jan 19 #Javascript
vue-router传参用法详解
Jan 19 #Javascript
vue-router实现嵌套路由的讲解
Jan 19 #Javascript
You might like
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php筛选不存在的图片资源
2015/04/28 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
javascript 动态添加表格行
2006/06/22 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
vue实现信息管理系统
2020/05/30 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
Python类装饰器实现方法详解
2018/12/21 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Python调用Redis的示例代码
2020/11/24 Python
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
小学母亲节活动总结
2015/02/10 职场文书
中学生学习保证书
2015/02/26 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
环保建议书作文500字
2015/09/14 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书