失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 关于vue2用vue-cli搭建环境后域名代理的http-proxy-middleware解决api接口跨域问题

关于vue2用vue-cli搭建环境后域名代理的http-proxy-middleware解决api接口跨域问题

时间:2024-02-07 04:45:01

相关推荐

关于vue2用vue-cli搭建环境后域名代理的http-proxy-middleware解决api接口跨域问题

在vue中用http-proxy-middleware来进行接口代理,比如:本地运行环境为http://localhost:8080但真实访问的api为 这时我们就需要把代理到api接口上

在build下的 dev-server.js 中我们需要对下面代码进行修改

var proxyMiddleware = require('http-proxy-middleware');

var proxyMiddleware = require('http-proxy-middleware')var server = express()server.middleware = [proxyMiddleware(['/mobile'], {target: '', changeOrigin: true}),proxyMiddleware(['/school'], {target: '', changeOrigin: true}),proxyMiddleware(['/api/track'], {target: '', changeOrigin: true}),proxyMiddleware(['/manage/integral'], {target: '', changeOrigin: true}),];server.use(server.middleware);

这里需要注意需要把接口调用的开始部分分别写在 proxyMiddleware中 如 /mobile是代表你访问的接口为 /mobile/ 开头的所有接口 相当于/mobile/*

在调用的时候我们用 vue-resource,在main.js中引入

vue-resource 的安装方式: npm install --save-dev vue-resource

import VueResource from 'vue-resource'Vue.use(VueResource)

在页面中具体调用为

this.$http.get('/mobile/api/h5/', {params: {name:1,type:2}}).then((response) => {response = response.body;if (response.errno === 0) {this.goods = response.data;}});

到这里我们就完成了vue的代码域名代理,如有错误,或错别字欢迎大家留言指正!

如果觉得《关于vue2用vue-cli搭建环境后域名代理的http-proxy-middleware解决api接口跨域问题》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。