如何在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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
类似CSDN图片切换效果脚本
Sep 17 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
JSON 数据格式详解
Sep 13 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
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版
2006/10/09 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
详解package.json版本号规则
2019/08/01 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
基于python 取余问题(%)详解
2020/06/03 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
部队领导证婚词
2014/01/12 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
武当山导游词
2015/02/03 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers