如何在vue里面优雅的解决跨域(路由冲突问题)
如何在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项目上线 看看这个文章,专门讲上线的
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Vue中传递自定义参数到后端、后端获取数据并使用Map接收参数
有些传递的参数是直接拼接到URL地址栏中的、但是为了统一管理、不能将传递的参数直接拼接到地址栏中,接下来通过本文给大家介绍Vue中传递自定义参数到后端、后端获取数据并使用Map接收参数,感兴趣的朋友一起看看吧2022-10-10
Vue中data传递函数、props接收函数及slot传参的使用及说明
这篇文章主要介绍了Vue中data传递函数、props接收函数及slot传参的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10
vue父组件传值子组件报错Avoid mutating a prop directly解决
这篇文章主要为大家介绍了vue父组件传值子组件报错Avoid mutating a prop directly解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率。这篇文章主要介绍了基于Vue-Cli 打包自动生成/抽离相关配置文件 ,需要的朋友可以参考下2018-12-12
Vue中的无限加载vue-infinite-loading的方法
本篇文章主要介绍了Vue中的无限加载vue-infinite-loading的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-04-04
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
这篇文章主要给大家介绍了关于vue.js内部自定义指令与全局自定义指令的实现方法,vue.js中实现自定义指令的主要是利用directive,directive这个单词是我们写自定义指令的关键字,需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07


最新评论