使用 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); })
原文地址:https://www.cnblogs.com/goloving/p/8901189.html
时间: 2024-10-06 23:21:34