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

Question

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

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

假设 API 服务器位于域下：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。

所以，目前我有以下课程：

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;
}

来自nice article 的示例可能会有所帮助。

或者你可以google一下其他的，标题类似于“如何使用 Nginx 反向代理设置 Node.js 生产应用程序”

如果你不能这样放置你的后端服务器，你总是可以在 Nginx 后面或在 Nginx 配置中做一些事情来实际向 api.com/api 发送请求