Axios，代理请求似乎不起作用

Question

似乎axios库无法正常运行，我也不知道出了什么问题。

首先来解释。 我是axios ，我工作的公司已使用nGinx和proxy pass设置了API服务器。

可以这么说，API服务器位于以下域中： https://www.api.com : https://www.api.com ，而api端点位于https://www.api.com/api/下。

然后，我们将创建一个SSR应用程序，使用axios库向该服务器发出请求，但要点是使用axios的proxy settings ，这样最终请求将不会像这样： https://www.api.com/api/endpoint但这样： https://www.js-app.com/api/endpoint https://www.api.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设置也是如此：

那么，您认为我做错了什么？ 您认为我试图实现不可能的目标吗？ 有什么解决办法吗？ 关于如何解决此问题的任何想法？

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上搜索其他标题，类似于“如何使用Nginx反向代理为生产设置Node.js应用程序”

如果您不能像这样放置后端服务器，则始终可以在Nginx后面或在Nginx配置中执行一些操作，以实际将请求发送到api.com/api