vue+webpack 你可能遇到的几种proxy或agent使用代理问题
原创vue+webpack 你可能遇到的几种proxy或agent使用代理问题
原创
shirishiyue
发布于 2018-11-07 23:10:11
发布于 2018-11-07 23:10:11
这了总结一下用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 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读