Axios, запрос прокси вроде не работает

Question

Кажется, что библиотека axios не работает должным образом, и я не знаю, в чем дело.

Сначала объясню. Я новичок в axios, и компания, в которой я работаю, настроила сервер API, используя nGinx с proxy pass.

Допустим, сервер API находится в домене: https://www.api.com, а конечные точки api расположены в https://www.api.com/api/.

Затем мы собираемся создать приложение SSR, используя библиотеку axios, чтобы сделать запрос к этому серверу, но смысл в том, чтобы использовать proxy settings из axios таким образом, чтобы запросы не будут такими: https://www.api.com/api/endpoint, но такими: https://www.js-app.com/api/endpoint.

Итак, в настоящее время у меня есть следующий класс:

class WebApiService {
    constructor() {
        this.deferred = Q.defer();
        this.$http = axios.create();
    }

    async call(config) {
        WebApiService._setDefaultApiCallHeader(config);

        try {
            const result = await this.$http(config);
            this.deferred.resolve(result);
        } catch( error ) {
            this.deferred.reject(error);
        }

        return this.deferred.promise;
    }

    static _setDefaultApiCallHeader(config) {
        config.headers = config.headers || {};

        if (window.sessionStorage['Authorization'] !== 'undefined') {
            config.headers['Authorization'] = `Bearer ${window.sessionStorage['Authorization']}`;
        }


        // HERE I SETUP THE PROXY SETTINGS
        if ( /^\/api\//.test(config.url) ) {
            config.proxy = config.proxy || {};
            config.proxy.host = 'https://www.api.com';
        }
    }
}

Итак, теперь, когда я использую этот класс из другого места в моем приложении, используя код, подобный этому:

const options = {
  method: 'POST',
  url: '/api/v0/configs',
  data: { domain: window.location.hostname }
};

const websiteConfig = await this.webApiService.call(options);

В консоли браузера я получаю сообщение об ошибке 404, потому что axios все еще запрашивает вызов API с моего локального хоста, а не с удаленного сервера.

Я получаю такую ​​ошибку:

Также настройки axios внутри Interceptor запроса таковы:

Так, ты думаешь, я что-то не так делаю? Ты думаешь, я пытаюсь достичь чего-то, что невозможно? Есть ли выход из этой ситуации? Есть идеи, как подойти к этому вопросу?

Answer 1

Я думаю, что вы неправильно используете опцию прокси Axios. Эта опция, насколько я понимаю, предназначена для размещения некоторого фактического прокси. И вам не нужно все это в вашем случае.

Вы должны обслуживать ваше приложение-клиент с вашего сервера https://www.js -app.com , ниже приведен пример конфигурации Nginx:

location / {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
 }

А для API-сервера:

location /api {
  proxy_pass http://localhost:8081; # here you put your backend server port
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
  proxy_read_timeout 600s;
}

Примеры из этой хорошей статьи , которая может помочь.

Или вы можете использовать Google для других приложений с заголовком, похожим на «Как настроить приложение Node.js для работы с обратным прокси-сервером Nginx»

Если вы не можете установить свой бэкэнд-сервер таким образом, вы всегда можете сделать что-то за Nginx или в конфигурации Nginx, чтобы фактически отправить запрос на api.com/api