Vue 2.x 如何利用proxyTable实现跨域请求（反向代理）

布满荆棘的人生 2022-05-25 01:13 192阅读 0赞

在项目运行的时候吗，不可缺少就是的设置反向代理的   
详细的文档 [http-proxy-middleware][]   
下载的官方的脚手架打开文件的build/dev-server.js

搜索：（这个插件官方已经下载好了，只需要简单的配置一下就好的）

var proxyMiddleware = require('http-proxy-middleware')//获取插件

*  1

添加下列代码：   
方法一：

app.use('/api', proxyMiddleware({
      target: 'http://xxxx.weddingee.com/', //域名的配置，
      changeOrigin:true,//通过设置changeOrigin:true 开启代理
    }));

*  1
 *  2
 *  3
 *  4

修改脚手架的东西后一定要npm run dev

全局配置axios的方法：

npm  install axios -D

*  1

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(...)

*  1
 *  2
 *  3
 *  4
 *  5

组件中调用的方法：

getData(){
      axios.get('/api/work/home')  //api是前端自己添加的 
         .then(function (res) { 
           console.log(res);
         })
         .catch(function (error) { 
           console.log(error);
         });
     }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9

方法二：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,
          },
    }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12

修改脚手架的东西后一定要npm run dev   
调用的方法省略。

[http-proxy-middleware]: https://github.com/chimurai/http-proxy-middleware#options