如何在发送之前动态更改 proxy.conf.js 中的请求答案

【问题标题】：How to dynamically change request in proxy.conf.js before it's sent如何在发送之前动态更改 proxy.conf.js 中的请求
【发布时间】：2019-09-04 20:02:03
【问题描述】：

我有一个 Angular7 应用程序，想通过 Angular CLI 代理向 API 发送 HTTP 请求。然后 API 使用 JSON 对象进行响应。我对代理的配置是在 proxy.conf.js 中完成的。

具有简单目标的简单请求可以正常工作。但我想在发送之前动态更改请求。我在 https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md#bypass-the-proxy 找到了一条指令，但我无法让它动态更改目标 url。

我的目标：
我想向天气 API 发送请求。我发送到该 API 的 url 必须包含城市的纬度和经度。城市将由用户选择。此用户输入应更改请求目标。

我发送的请求：
http://localhost:4200/forecast?lat=51.33962&lon=12.37129

这是我的 proxy.conf.js：

const PROXY_CONFIG = [
    {
        context: [
            "/forecast",
        ],
        target: "https://api.anyName.net/forecast/anyKey/37.8267,-122.4233",
        changeOrigin: true,
        secure: false,
        pathRewrite: {
            "^/forecast": ""
        },
        bypass: function(req, res, proxyOptions) {
            if (req.query.lat) {
                let LATITUDE = req.query.lat;
                let LONGITUDE = req.query.lon;
                const newTarget = "https://api.anyName.net/forecast/anyKey/"+LATITUDE+","+LONGITUDE;               
                req.target = newTarget;
                return newTarget;
            } 
        },
    }
];

module.exports = PROXY_CONFIG;

我不太清楚如何使用旁路功能。我能做些什么来改变目标？

【问题讨论】：

您是否尝试过使用环境变量？
欢迎来到 SO。为了使此设置正常工作，我认为您的代理配置目标应该是"https://api.anyName.net/forecast/anyKey"。此外，如果您需要根据环境（dev、qa、prod 等）调整请求的路径或某些常量，更好的方法是使用 angular cli 已经提供的环境文件策略。如果您需要始终根据某些条件更改您的请求，更好的方法是使用interceptor。

标签： angular angular-cli angular-cli-v7

【解决方案1】：

好吧，我设法实现了我想要的。我确实错过了我在pathRewrite: {"^/forecast": ""}, 这一行中所做的实际上是一个正则表达式，我可以操纵将要发送的请求。所以我做了以下事情：

const PROXY_CONFIG = [
    {
        context: [
            "/forecast",
        ],
        target: "https://api.anyName.net/forecast/anyKey/",
        changeOrigin: true,
        secure: false,
        pathRewrite: function(path) {
            const parameter = path.split("?")[1];
            const latitude  = parameter.split("&")[0].split("=")[1];
            const longitude = parameter.split("&")[1].split("=")[1];

            return path.replace(path, `${latitude},${longitude}`);
        },
    }
];

module.exports = PROXY_CONFIG;

我确实在这里 https://github.com/chimurai/http-proxy-middleware#options 找到了有用的文档，并在 Angular-CLI proxy to backend doesn't work 那里得到了提示

【讨论】：