vue+webpack 你可能遇到的几种proxy或agent使用代理问题

原创

shirishiyue

发布于 2018-11-07 23:10:11

4.7K00

代码可运行

文章被收录于专栏：全栈码全栈码

运行总次数：0

代码可运行

这了总结一下用vue+webpack开发中可能遇到的各种proxy问题。希望能帮助到各位有需要的人。

首先环境分为两个大类：

你的开发机已经处于外网环境。
你的开发机处于公司内网（behind a corporate proxy），浏览器通过代理来上外网。

其次，两种地方使用代理：

webpack devServer 使用代理。
axios 使用代理。

现在，在你用webpack devServer开始的时候，你有一个 api，比如：

var data_api = '/api/getdata.php'; // 这个api需要对应到下面这个外网 
                                   // http://a.b.c/getdata.php  这个接口。

你使用这种相对路径请求数据时，明显需要在 devServer上配置转发 proxy咯，如下：

    '/api': {
        target: 'http://a.b.c',
		    secure:false,
		    pathRewrite: {'^/api':''},
        changeOrigin: true,
    }

但是，当你的机器不是出于外网，而是 behind a corporate proxy 时，，，那你就要配置 proxy 了，，，可如下：

const HttpProxyAgent = require('http-proxy-agent');    //安装一下这个包
const proxyServer = 'http://corporate.proxy:8080';     //这个你是公司的proxy
...

    '/api': {
        target: 'http://a.b.c',
		    secure:false,
    		pathRewrite: {'^/api':''},
        agent:new HttpProxyAgent(proxyServer),
    }

搞定。

如果你用axios时，不想借助devServer proxy转发，想直接用外部的http地址，比如：

var data_api = 'http://a.b.c/getdata.php'; //我想直接用axios访问这个外部接口。

如果你电脑在外网，那么直接用即可。

如果在内外，那么就要配置proxy，，，，这时，proxy需要配置在 axios 上面，而不是devServer了。

     axios({
         method:'get',
         url: 'http://a.b.c/getdata.php',
         responseType:'stream',
         proxy: {
           host: 'corporate.proxy.com',
           port: 8080,
         }
     })

可以工作。

但是，如果data_api 的 url 是 https 的，抱歉，上面还是不行。

解决办法：用 axios-https-proxy-fix 这个axios。

//------------file request.js------------
//const axios = require('axios');
import axios from 'axios-https-proxy-fix';  //这个插件可以代理访问 https网站。https://github.com/axios/axios/issues/925

const axios_proxy = axios.create({
  withCredentials:false,         //跨域
  proxy: {
    host: 'corporate.proxy.com',
    port: 8080,
    //auth: {
    //  username: 'mikeymike',
    //  password: 'rapunz3l'
    //}
  }
});

export default {
    'axios_proxy': axios_proxy,
}

可以参考：Axio behind proxy ：

https://github.com/axios/axios/issues/1679

https://janmolak.com/node-js-axios-behind-corporate-proxies-8b17a6f31f9d

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

其他