vue解决跨域路由冲突问题思路解析


Posted in Javascript onNovember 03, 2017

vue 简介

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试。

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

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);
  })
 }

PS:下面通过一段代码学习下vue下跨域设置

1、在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。

2、当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: false,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://api.douban.com/v2',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  },
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
}

将target设置为我们需要访问的域名。

3、然后在main.js中设置全局属性:

Vue.prototype.HOST = '/api'

4、至此,我们就可以在全局使用这个域名了,如下:

var url = this.HOST + '/movie/in_theaters'
  this.$http.get(url).then(res => {
   this.movieList = res.data.subjects;
  },res => {
   console.info('调用失败');
  });

总结

以上所述是小编给大家介绍的vue解决跨域路由冲突问题思路解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
javascript闭包入门示例
Apr 30 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
React-intl 实现多语言的示例代码
Nov 03 #Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 #Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 #Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 #Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 #Javascript
微信小程序自动客服功能
Nov 02 #Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 #Javascript
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP include任意文件或URL介绍
2014/04/29 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
语义化 H1 标签
2008/01/14 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python文本数据相似度的度量
2018/03/12 Python
Python 函数返回值的示例代码
2019/03/11 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
校园门卫岗位职责
2013/12/09 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
社会发展项目建议书
2014/08/25 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
护士个人年终总结
2015/02/13 职场文书
2015年复活节活动总结
2015/02/27 职场文书
个人年终总结范文
2015/03/09 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python