在vuecli3的项目中配置axios依赖
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 全局挂载axios
import axios from 'axios'
// 配置你的请求的路径
axios.defaults.baseURL = 'http://localhost:8088/api'
//在任意组件中使用,$http调用axios
Vue.prototype.$http = axios
new Vue({
router,
el: '#app',
render: h => h(App)
}).$mount('#app')
在vuecli3中跨域访问问题的解决办法
因为在vuecli3创建的脚手架项目众不再包含config与build目录,
所以需要自行在根目录(与package.json同级)下创建vue.config.js文件
配置devserver.proxy代理
module.exports = {
devServer: {
// 设置代理
proxy: {
'/api': {//凡是遇到http://localhost:XXXX/api形式的路径,全部启用代理,作用就是筛选出数据请求和静态资源访问。可以自己定义:'/任意'(前后保持一致)
target: 'http://127.0.0.1:8088', // 后端服务器域名
ws: true, // 是否启用websockets
changeOrigin: true// 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
}
}
}
}