vue.js如何解决跨域请求问题
在vue项目中,前端与后台进行数据请求或者提交时,如果后台没有设置跨域,那么前端本地调试代码的时候就会报错使用http-proxy-middleware 代理解决(注意:项目使用vue-cli脚手架搭建)例如请求的接口为:'http://172.16.2.212:10000/api/micro/productStore/getSubCategoryListAndProd'从项目的根目录...
·
在vue项目中,前端与后台进行数据请求或者提交时,如果后台没有设置跨域,那么前端本地调试代码的时候就会报错
使用http-proxy-middleware 代理解决(注意:项目使用vue-cli脚手架搭建)
例如请求的接口为:'http://172.16.2.212:10000/api/micro/productStore/getSubCategoryListAndProd'
- 从项目的根目录下打开config/index.js文件,在proxyTable中添加如下代码:
proxyTable: { '/pcApi': { target: 'http://172.16.2.212:10000/api/micro', changeOrigin: true, pathRewrite: { '^/pcApi': '' } } },
- 使用axios请求数据时直接使用'/pcApi':
getHotSell () { this.$get({ url: '/pcApi/productStore/getSubCategoryListAndProd/gouwuchetuijian/CN-3101', success:function (res) { console.log(res) } }) }
-
通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:
let serverUrl = '/api/' //本地调试时 // let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时 export default { dataUrl: serverUrl + 'bj11x5.json' }
更多推荐
已为社区贡献1条内容
所有评论(0)