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 条评论
登录 后参与评论

相关文章

来自专栏码农阿宇

新建.Net Core应用程序后引用项一直黄色感叹号怎么办?

我们在vs中创建.Net Core应用程序后,引用项可能出现黄色感叹号,正常情况下,这种黄色感叹号时能在项目创建成功之后迅速消失的,可也有些时候一直不消失,怎么...

2937
来自专栏康怀帅的专栏

Redis 备份与恢复

本文介绍 Redis 持久化。 RDB 该方式为默认方式。 RDB 方式的持久化是通过快照(snapshotting)完成的,当符合一定条件时 Redis 会自...

3814
来自专栏运维技术迷

Veeam Backup & Replication(三):创建备份与还原备份

一、创建备份和手动备份 1.创建备份 目标:为esxi服务器上的xp test虚拟机做备份 1.1 打开Veeam软件,选择Backup & Replic...

4754
来自专栏云计算教程系列

给你的数据库加一道缓存:Redis入门教程

Redis是一个使用ANSI C编写的开源、支持网络、基于内存、可选持久性的键值对存储数据库。 本教程将会教你如何在Ubuntu 18.04 上安装、配置Red...

2040
来自专栏Java技术栈

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

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

682
来自专栏性能与架构

非常小巧的HTTP压力测试工具

如果你关心的性能指标主要是 QPS 每秒处理的请求数,那么 Benchttp 非常适合你 Benchttp 是一个超轻量级的压力测试工具,安装简单、用法类似 A...

4444
来自专栏博客园

Redis事务

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

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

Linux下解压rar文件

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

3329
来自专栏程序员同行者

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

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

精讲Redis:持久化

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

1413

扫码关注云+社区