如何在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+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
django中的ajax组件教程详解
2018/10/18 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
利用CSS3在Angular中实现动画
2016/01/15 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
实例讲解python中的序列化知识点
2018/10/08 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
总经理助理的八要求
2013/11/12 职场文书
日语专业个人的求职信
2013/12/03 职场文书
教师绩效工资方案
2014/02/01 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
体育委员竞选稿
2015/11/21 职场文书
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL