vue-cli項目本地代理實現跨域請求
阿新 • • 發佈:2018-04-21
con 跨域 請求 AR url 本地 dex ams gin 使用 Vue-cli 創建的項目,開發地址是 localhost:8080,需要訪問非本機上的接口http://10.1.0.34:8000/queryRole。不同域名之間的訪問,需要跨域才能正確請求。跨域的方法很多,通常都需要後臺配置,不過 Vue-cli 創建的項目,可以直接利用 Node.js 代理服務器,通過修改vue proxyTable接口實現跨域請求,在vue-cli項目中的config文件夾下的index.js配置文件中,修改前的dev:
dev: {
env: require(‘./dev.env‘),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: ‘static‘,
assetsPublicPath: ‘/‘,
proxyTable: {},
cssSourceMap: false
}
只要修改裏面的proxyTable: {}項
proxyTable: {
‘/api‘: { //代理地址
target: ‘http://10.1.0.34:8000/‘, //需要代理的地址
changeOrigin: true, //是否跨域
secure: false,
pathRewrite: {
‘^/api‘: ‘‘ //本身的接口地址沒有 ‘/api‘ 這種通用前綴,所以要rewrite,如果本身有則去掉
}
}
}
然後重啟項目npm run dev
請求數據時URL前加上“/api”就可以跨域請求了
self.$axios.get(‘/api/queryRole‘, {params: params})
.then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
})
vue-cli項目本地代理實現跨域請求