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 相关文章推荐
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
PHP Array交叉表实现代码
2010/08/05 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
详解php中反射的应用
2016/03/15 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
Python实现的密码强度检测器示例
2017/08/23 Python
Python处理文本换行符实例代码
2018/02/03 Python
Python新手学习函数默认参数设置
2020/06/03 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
英国女性时尚品牌:Apricot
2018/12/04 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
信访工作汇报材料
2014/10/27 职场文书
员工升职自荐信
2015/03/27 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
小学生家长意见
2015/06/03 职场文书
大学生读书笔记大全
2015/07/01 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android