如何在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 相关文章推荐
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
javascript 用函数实现继承详解
May 28 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
将Vue组件库更换为按需加载的方法步骤
May 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
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
深入解析Python中的WSGI接口
2015/05/11 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
联想台湾官网:Lenovo TW
2018/05/09 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
学雷锋月活动总结
2014/04/25 职场文书
推广普通话标语
2014/06/27 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
师范生见习总结范文
2015/06/23 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android