【前端工程】反向代理

Charles配置反向代理

Charles 功能介绍和使用教程

1、设置反向代理服务器端口

相当于为目的地设置一个详细地址

2、反向代理设置映射关系

相当于规划一个从起始点到终点站的地图

• 点击Reverse Proxies..

• 进入界面，选择Enable选项，并点击add按钮

• Local port填写本地端口（例如本地访问地址为：https://localhost:7676）
• Remote host填写远程地址host(例如线上访问地址为: https://prod.pandateacher.com)
• Remote port填写服务器地址默认为443

3、SSL Proxy配置

相当于开启代理https服务，在SSL Proxy配置下的host才允许在本地通过https访问请求或接受请求。

Vue项目通过ProxyTable配置反向代理

使用方法

具体可参考：vue-cli本地环境API代理设置和解决跨域

思想：

import * as express from 'express';
import { createProxyMiddleware, Filter, Options, RequestHandler } from 'http-proxy-middleware';
 
const app = express();
 
app.use('/api', createProxyMiddleware({ target: 'http://www.example.org', changeOrigin: true }));
app.listen(3000);
 
// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

node 中

// proxy api requests

Object.keys(proxyTable).forEach(function (context) {

    var  options =  proxyTable\[context\]

    if (typeof  options === 'string') {

    options = { target:  options }

    }

app.use(proxyMiddleware(options.filter ||  context,  options))

})

常见错误

proxyTable 配置无效
proxTabtle 配置错误，比如：pathRewrite中配置 和前端接口请求中url写法不匹配或是接口请求中写死了host，所以不走代理。
其他可能性参考：Vue-cli proxyTable 配置无效问题

未完待续。