Как динамически изменить запрос в proxy.conf.js перед его отправкой

У меня есть приложение Angular7, и я хочу отправить HTTP-запрос к API через прокси-сервер Angular CLI. Затем API отвечает объектом JSON. Мои настройки прокси выполняются в файле proxy.conf.js.

Простой запрос с простой целью работает нормально. Но я хочу динамически изменять запрос перед его отправкой. Я нашел инструкцию по адресу https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md#bypass-the-proxy, но я просто не могу заставить его работать динамически изменить целевой URL.

Моя цель:
я хочу отправить запрос к API погоды. URL-адрес, который я отправляю в этот API, должен содержать широту и долготу города. Город будет выбран пользователем. Этот пользовательский ввод должен изменить цель запроса.

Запрос, который я отправляю:
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;

Я не совсем уверен, как использовать функцию обхода. Что я мог сделать, чтобы изменить цель?


angular angular-cli angular-cli-v7
person steph_le    schedule 14.04.2019    source источник
comment
Вы пытались использовать переменные среды?   -  person Standaa - Remember Monica    schedule 14.04.2019
comment
Добро пожаловать в СО. Чтобы эта настройка работала, я думаю, что ваша цель в конфигурации прокси должна быть "https://api.anyName.net/forecast/anyKey". Кроме того, если вам нужно настроить путь или некоторую константу в запросе в соответствии со средой (dev, qa, prod и т. д.), лучший способ сделать это — использовать стратегию файлов среды, уже предоставленную angular cli. Если вам нужно всегда изменять свои запросы в соответствии с каким-либо условием, лучшим подходом будет использование interceptor.   -  person GCSDC    schedule 14.04.2019

Ответы (1)


arrow_upward
2
arrow_downward

Что ж, мне удалось добиться того, чего я хотел. Я упустил, что то, что я делаю в этой строке pathRewrite: {"^/forecast": ""},, на самом деле является RegEx, с помощью которого я могу манипулировать запросом, который будет отправлен. Поэтому я сделал следующее:

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 для бэкенда не работает

person steph_le    schedule 16.04.2019