1.修改main.js,加入如下代碼
import Axios from 'axios';
Vue.prototype.$axios = Axios;
Axios.defaults.baseURL = '/api';
2.配置代理
config文件夾下的index.js 文件中的proxyTable字段修改
dev: {
env: require('./dev.env'),
port: 8090,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target:'http://api.douban.com/v2', // 你請求的第三方接口
changeOrigin:true, // 在本地會創建一個虛擬服務端,然後發送請求的數據,並同時接收請求的數據,這樣服務端和服務端進行數據的交互就不會有跨域問題
pathRewrite:{ // 路徑重寫,
'^/api': '' // 替換target中的請求地址,也就是說以後你在請求http://api.douban.com/v2/XXXXX這個地址的時候直接寫成/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
}
3.頁面使用axios 例子
this.$axios.get('url').then((res)=>{
//賦值操作
})
至此純前端配置代理解決axios跨域的到解決。後端跨域參考鏈接如下