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 animate图片模向滑动示例代码
Jan 26 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
海贼王:最美的悬赏令!
2020/03/02 日漫
php 日期时间处理函数小结
2009/12/18 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
layui导航栏实现代码
2017/05/19 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
Python2中的raw_input() 与 input()
2015/06/12 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Python如何对齐字符串
2020/07/30 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
审计班子对照检查材料
2014/08/27 职场文书
授权委托书怎么写
2014/09/25 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis