如何在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 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
用js编写留言板
Mar 17 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
PHP使用CURL模拟登录的方法
2015/07/08 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
python中的lambda表达式用法详解
2016/06/22 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
校运会入场式解说词
2014/02/10 职场文书
商场消防演习方案
2014/02/12 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
Python基础详解之描述符
2021/04/28 Python
详解Vue的options
2021/05/15 Vue.js
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技