Angular 如何在proxy.conf.js中动态更改请求;s发送

Angular 如何在proxy.conf.js中动态更改请求;s发送,angular,angular-cli,angular-cli-v7,Angular,Angular Cli,Angular Cli V7,我有一个Angular7应用程序,希望通过AngularCLI代理向API发送HTTP请求。然后,API使用JSON对象进行响应。我的代理配置在proxy.conf.js中完成 带有简单目标的简单请求可以正常工作。但我想在发送请求之前动态更改请求。我在上找到了一条指令,但我无法使其用于动态更改目标url。 我的目标: 我想向天气API发送请求。我发送到该API的url必须包含城市的纬度和经度。城市将由用户选择。此用户输入应更改请求目标。 我正在发送的请求: http://localhost:4

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

带有简单目标的简单请求可以正常工作。但我想在发送请求之前动态更改请求。我在上找到了一条指令,但我无法使其用于动态更改目标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;

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

我成功地实现了我想要的。我确实忽略了我在这一行中所做的
路径重写:{“^/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://api.anyName.net/forecast/anyKey“
。此外,如果需要根据环境(dev、qa、prod等)调整路径或请求上的某个常量,那么更好的方法是使用angular cli已经提供的环境文件策略。如果您需要始终根据某些条件更改请求,更好的方法是使用
拦截器。