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

这了总结一下用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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SpiritLing

IIS前端页面不显示详细错误解决方法

要想解决这个问题,有三种方法可以考虑: 1.Internet信息服务(IIS)管理器 2.Web.config文件 3. 命令行 在IIS的“错误页”右边的“编...

3105
来自专栏Rgc

redis永久化存储

原因:redis是存放在内存中的,断电会导致数据丢失 解决方法:把redis数据进行持久性存储,将其存储在磁盘中。

1285
来自专栏Java技术栈

Redis 高可用特性之 “持久化” 详解

在之前的文章中,介绍了《Redis的内存模型》,从这篇文章开始,将依次介绍 Redis 高可用相关的知识——持久化、复制(及读写分离)、哨兵、以及集群。

862
来自专栏技术之路

sql常用的系统存储过程

常用的系统存储过程 sp_databases 列出服务上的所有数据库 sp_helpdb 报告有关指定数据库或所有数据库的信息 sp_renamedb 更...

19410
来自专栏有困难要上,没有困难创造困难也要上!

使用 nvm 管理多版本 node

3527
来自专栏xingoo, 一个梦想做发明家的程序员

Linux下解压rar文件

  正常rar是windows下的压缩文件,linux是不支持的。但是可以通过安装rarlinux来使用rar命令解压rar文件。   首先下载rarlinux...

5979
来自专栏Java架构沉思录

Redis持久化方案该如何选型

这篇文章主要介绍Redis高可用相关的知识——持久化、复制(及读写分离)、哨兵、以及集群。

1922
来自专栏IT技术精选文摘

精讲Redis:持久化

从这篇文章开始,将依次介绍Redis高可用相关的知识——持久化、复制(及读写分离)、哨兵、以及集群。

1593
来自专栏博客园

Redis事务

和其它数据库一样,Redis作为NoSQL数据库也同样提供了事务机制。在Redis中,MULIT,EXEC,DISCARD,WATCH这个四个命令是实现事务的基...

1952
来自专栏程序员同行者

利用django-simple-captcha生成验证码

2684

扫码关注云+社区

领取腾讯云代金券