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

Question

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

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

比方说，API 服务器位于域下:https://www.api.com 并且 api 端点位于 https 下://www.api.com/api/.

然后，我们将创建一个 SSR 应用程序，使用 axios 库向此服务器发出请求，但重点是使用 代理设置 axios，最终请求不会像那样:https://www.api.com/api/endpoint 但像那样: https://www.js-app.com/api/endpoint.

所以，目前我有以下类(class):

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这可能会有所帮助。

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

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