【前端工程】反向代理

Charles配置反向代理

Charles 功能介紹和使用教程

一、設置反向代理服務器端口

至關於爲目的地設置一個詳細地址

二、反向代理設置映射關係

至關於規劃一個從起始點到終點站的地圖

• 點擊Reverse Proxies..

• 進入界面，選擇Enable選項，並點擊add按鈕

• Local port填寫本地端口（例如本地訪問地址爲：https://localhost:7676）
• Remote host填寫遠程地址host(例如線上訪問地址爲: https://prod.pandateacher.com)
• Remote port填寫服務器地址默認爲443

三、SSL Proxy配置

至關於開啓代理https服務，在SSL Proxy配置下的host才容許在本地經過https訪問請求或接受請求。

Vue項目經過ProxyTable配置反向代理

使用方法

思想：

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 配置無效問題

未完待續。