Vue 2.x 如何利用proxyTable实现跨域请求(反向代理)
在项目运行的时候吗,不可缺少就是的设置反向代理的
详细的文档 http-proxy-middleware
下载的官方的脚手架打开文件的build/dev-server.js
注:(这个插件官方已经下载好了,只需要简单的配置一下就好的)
var proxyMiddleware = require('http-proxy-middleware')//获取插件
方法一:
1 app.use('/api', proxyMiddleware({ 2 target: 'http://xxxx.weddingee.com/', //域名的配置, 3 changeOrigin:true,//通过设置changeOrigin:true 开启代理 4 }));
全局配置axios的方法:
npm install axios -D
main.js
import axios from 'axios' // Vue.prototype.axios = axios //组件调用this.axios.get(...) // Vue.prototype.$ajax = axios //换个名字 组件调用this.$ajax.get(...) window.axios = axios; //组件中调用 axios.get(...)
组件中调用的方法:
getData(){ axios.get('/api/work/home') //api是前端自己添加的 .then(function (res) { console.log(res); }) .catch(function (error) { console.log(error); }); }
方法二:config/index.js
proxyTable: { firstProxy: { target: 'http://dingee.com/', filter(pathname, req) { //console.info('firstProxy',req) const isApi = pathname.indexOf('/api') == 0; const ret = isApi; return ret; }, changeOrigin: true, }, }
修改脚手架的东西后一定要 npm run dev
注:文章来自http://blog.csdn.net/zhooson/article/details/76639112

浙公网安备 33010602011771号