|
Vue项目中，如何使用代理设置来实现跨域
在config中的，index.js里的proxyTable中添加代理设置，代码如下： 代理设置
proxyTable: {
'/api':{
target:"http://47.93.166.112/BrainPcWeb",//设置你调用的接口域名和端口号 别忘了加http
changeOrigin:true,
pathRewrite:{
'^/api':''//这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替
//比如我要调用'http://40.00.100.133:3002/user/login'，直接写‘/api/user/login'即可
}
}
}通过上面的代码，可以实现代理跨域
Vue项目中，如何管理我们的接口地址呢？ 1. src 中专门建立一个api 文件夹进行接口地址管理 图片：api.png 
2. api.js 为所有接口文件的主入口，代码如下： import index from './index.js'
import role from './role.js'
import shop from './shop.js'
import user from './user.js'
export default{
index,
role,
shop,
user
}其它文件都一样，就是将不同的接口放到不同的文件中，可以根据功能来划分文件，也可以根据页面来划分，如index.js 代码如下：export default{
// 产品相关操作
productList:'/api/product/productList', // 产品列表
productDetails:'/api/product/productDetails', // 产品详情
productCount:'/api/product/productCount', // 产品种数
// 社区相关操作
articleList:'/api/article/articleList', // 文章列表
articleListDetails:'/api/article/productDetails', // 文章详情
articleListCount:'/api/article/productCount', // 文章总数
articleMark:'/api/article/articleMark', // 文章点赞
articleCollect:'/api/article/articleCollect' //文章收藏
}3. 在main.js 中引用api.js ，并添加到vue实例属性中import Vue from 'vue' import App from './App' import router from './router' import Vuex from 'vuex' import ElementUI from 'element-ui' import axios from 'axios' import store from './store/index.js' import api from './api/api.js' //引入api文件 axios.defaults.baseURL="http://localhost:8888"; //全局注册 Vue.use(Vuex); Vue.use(ElementUI); //添加属性 Vue.prototype.$axios = axios; Vue.prototype.$api = api; //将api添加到vue实例对象上 Vue.config.productionTip = false4. 接口调用时，直接使用$this.$api.对应的键名，获取相应的接口地址 this.$axios.get(this.$api.produList,{ params:{}})欢迎一起讨论
原创文章，转载请申明出处：http://bugshouji.com/shareweb/t449 |
|
|
|
沙发#
发布于：2019-07-24 10:37
|
|
|
